Currently, I am constructing a Tabler dashboard and incorporating some ReactJS components into it. Initially, I used traditional HTML pages along with Jinja2 templates. However, I have now started integrating ReactJS for certain components.
I prefer not to rely heavily on third-party tools such as react-tabler or bootstrap-tabler since they introduce unnecessary additional packages which may not be essential. Surprisingly, I have managed to develop an aesthetically pleasing Tabler dashboard using ReactJS components without the need for these extra packages.
The only issue I am encountering at the moment is related to displaying a Modal. Although the functionality itself works, the CSS transitions do not work smoothly initially. To address this, I implemented the following workaround:
// handle button click
const handleEditClick = (row) => {
setIsModalOpen(true);
modalRef.current.style.display = "block";
// delay to ensure display:block setting first
setTimeout(() => {
modalRef.current.classList.add("show");
}, 100);
};
I find this approach a bit makeshift and would like to explore alternative methods.
Displaying a Modal functions perfectly by setting the style="display:block attribute initially followed by adding the show class. This technique allows me to avoid excessive JavaScript coding. Nevertheless, the order of applying display:block is crucial. It seems that if this style is not established first, both changes occur simultaneously or perhaps the display:block attribute kicks in slightly later, resulting in a lack of transitional effect.
I experimented with including the event listener
modalRef.current.addEventListener("transitionend", handleTransitionEnd);Is there a more elegant solution than relying on a 100ms timeout? Clearly, setting display:block as default is not viable as it renders my application unresponsive due to the opaque modal overlaying it.