Build a Modal Component purely in ReactJS and TailwindCSS

we are going to make this awesome Moto component purely in react and Tailwind CSS along with this smooth transition effect let's get straight to it initially I have the buttons already set up you can copy the Styles if you want it is completely optional we'll just focus on the Moto component from here we'll take the open State on close function and children let's start with the backdrop when the user clicks on the backdrop it would trigger the on close function for Styles make it fixed in in set 0 so it can appear in front and span the whole screen make the content completely centered horizontally and vertically we'll add a transition on the background color when opened we want it to be visible with black background having twenty percent opacity otherwise it will be invisible let's add the component before moving ahead we need a state to control the open state of the modal this button will open the modal pass this open state to the modal and the on close function that will set the open state to false I will just add this trash icon as a child make it horizontally centered in red it should open the modal now I think I forgot to show the children let's move on to the actual modal background white rounded borders Shadow padding and apply transition on all properties when the modal is opened it will be 100 scaled with full opacity otherwise 125 scaled for the zoom effect and zero opacity for the fade effect and our Bare Bones modal is done but you'll notice that clicking on the modal is actually closing it and in most cases you don't want that this is because of event bubbling due to which the click events on a child that is our modal are bubbled up to the parent that is our backdrop which ultimately triggers the enclosed function set on our backdrop to prevent that we need to stop the propagation of the click event it should prevent this Behavior now last thing we need is the close button on the top right corner of our modal I am making it absolute so it can appear above the content place the top right leaving some space and the usual button stuff and assign the on close function to it finally our Moto component is done I will just give a short demonstration on how to use it I usually wrap the whole content with a container of a specific width or Max width an action icon on top and the body or text content below that with less width or you can use padding also finally some action buttons on the footer that's it thanks for watching till the end leave a like if you found this helpful and subscribe to see more content like this

Channel: Your Code Lab

Views: 11,493

Keywords: reactjs, tailwindcss, javascript, webdev, web development, coding, programming, react components

Id: dEGbXY-8YtU

Length: 6min 16sec (376 seconds)

Published: Wed Mar 29 2023