React Modal (Pop-Up) with Tailwind CSS and Typescript

all right welcome I will show you how to make model in react with tail link and typescript firstly as you can see we have really basic react application setup and let's go to app.tsx file and start to make our model example let me start to make our model button with some tailing around and then one button which will open model later let's create our state which will keep a Boolean value to help us when we are opening and closing our model initial value is false and type is billion then add onclink function on our button our next move is writing model components below which we haven't created yet and send open value and close function now we can create our model components and let's import created model component in our parent component now as you can see we got type error it's showing our model component prop types are not defined yet we need to go to our model and Define type and we can use this type as a component prototype now we can create our model skeleton first we put base layer after we put base layer we can create model background layer don't forget to put stop propagation to avoid to trigger parent deal on close function lastly we put close on the top right of model and put children okay our model skeleton is ready now it's time to fill inside of the model here we can put whatever we want I will put one title and some random text with close Button as an example lastly Define onclink function to close our model here we go it's ready please don't forget to subscribe and give a like see you in next video

Channel: Semi Circle

Views: 3,454

Keywords: React, Modal, tailwind, typescript, JavaScript

Id: 1CN7C6u31zA

Length: 4min 7sec (247 seconds)

Published: Tue May 16 2023