Hello people, as developers, we frequently come across tasks to create forms. The general first thought that comes to our mind is to create a button or link that takes us to the form when clicked. But this way is too old school and makes an extra effort for the user to navigate. Curious to know another method. Yes, that is what "Modals" are.
Instead of routing to a new page or tab, the form appears right on the same page. Still not clear, let's understand it with a snapshot of the final page we will be building today.
Modal In Action -
When the button is clicked, we can observe the form comes right there instead of going to a new page.
Now let's get into building this simple modal. I hope you ignore the CSS.
Pre Requirements-
- Basic knowledge of HTML, CSS and ReactJS (specifically useState).
- Experience in using Tailwind CSS in ReactJS projects.
Setup
Setting Up ReactJS project
- Create a project directory. Let's say "modal."
- Open the terminal.
- Navigate to the modal directory and run the below command.
create-react-app .
- Delete every file in src folder except for "App.js", "index.css", "index.js".
- Clear out App.js
Bonus-1 - If you wish to avoid the above hassle, clone my ReactJS project boiler and do: "npm i".
ayushhagarwal
/
ReactJS_Project_Boiler
ReactJS_Project_Boiler
Setting Up Tailwind CSS
I have used Tailwind CSS official docs to write the steps on installing it into your ReactJS project. So you can refer directly to the site too.
Here's how you can install Tailwind CSS -
- In the root directory of your project folder, run the below commands:
install -D tailwinds postcss autoprefixer
tailwindcss init
- Add the paths to all of your template files in your
tailwind.config.jsfile. This is what the file looks like after adding them.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- Add the
@tailwinddirectives for each of Tailwind's layers into the./src/index.cssfile.
@tailwind base;
@tailwind components;
@tailwind utilities;
That's it. Now the project is ready with both TailwindCSS and ReactJs. We can start coding our Modal.
*Bonus-2 * - Instead of spending time on setting up ReactJS and TailwindCSS, you can clone the boiler repo from my Github. It is ready with all the setups and folder structure. Just clone, install and code.
ayushhagarwal
/
ReactJS_Tailwind_Boiler
This project is a boiler to start ReactJS and Tailwind project.
Creating Modal Component
Now comes the integral part of this blog. We will be creating a modal component and using it directly on App.js to render our modal.
- Create a file
Modal.jsinsrc/Componentsdirectory. - Next, the code to get the Modal functionality working is : ```
import React, { useState } from "react";
const Modal = () => {
const [showModal, setShowModal] = useState(false);
return (
<>
className="bg-blue-200 text-black active:bg-blue-500
font-bold px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button"
onClick={() => setShowModal(true)}
>
Fill Details
{showModal ? (
<>
General Info
className="bg-transparent border-0 text-black float-right"
onClick={() => setShowModal(false)}
>
x
First Name
Last Name
Address
City
className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
type="button"
onClick={() => setShowModal(false)}
>
Close
className="text-white bg-yellow-500 active:bg-yellow-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button"
onClick={() => setShowModal(false)}
>
Submit
</>
) : null}
</>
);
};
export default Modal;
### Understanding the Code Logic
The code looks complex, right? Don't worry, I'll break the logic into simple terms and help you understand. So let's see step by step what is happening.
1. In the `useState` hook :
const [showModal, setShowModal] = useState(false);
We have defined the initial state as `showModal` and the update function as `setShowModal`. This function will tell us if we intend to show the Modal or not.
Next to the right side of `=`, we have defined the default value of the initial state, i.e., `showModal` as false.
2. Next, we have a `<button>` tag. This button is to get to the form, so we have added a React `onClick` event. Whenever the user clicks the button, it will set the `showModal` to true using `setShowModal`.
3. That's it. After that, we have a ternary condition that displays the form using TailwindCSS. If `showModal` is "true" the meaning button was clicked.
4. The basic gist is if the `showModal` state is true, we have to display the form; otherwise, the Form is closed.
5. At the end, we export the component to use it in `App.js` to render it on our page.
### Rendering Modal Component
As we are very well aware of rendering a component in React, we have to import it in `App.js`. So we will do the same, with some basic CSS to the home page.
import Modal from "./Components/Modal";
const App = () => {
return (
);
};
export default App;
### Launching the Application
That's it; we have come to the end of creating a modal in React. To check. Our project just does `npm start` and voila!!.
### Conclusion
Via this blog, I have tried my best to try and teach a small but valuable mini project in React. The link to the Github repo of the project is below:
[ReactJS Tailwind CSS Modal](https://github.com/ayushhagarwal/ReactJS_Tailwind_Modal)
I would love to read your thoughts about the blog, so please comment below.
Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.
[**Buy me a COFFEE!**](https://www.buymeacoffee.com/ayushdev)
Thank you! 🙏
Hope to meet you again in my next blog. Bubye 👋🏻
Top comments (1)
Such markdown