Do you like to have cool animation popup forms in your application? If you do, then you are in the right place. Recently, I had fun playing with React State Hooks and CSS. I discovered that React State can do so many cool things with CSS. Implementing animation to an app can greatly improve the customer experience and make your app feel more professional. In this article, I am going to show you how to make an animation login popup form by using State Hook and CSS.
How to get started:
Before we start, you should already know what is State in React and how the React component works. First, we have to create all the components that we need. We are going to create simple NavBar and LoginForm components in our react app src folder. And we will import NavBar and LoginForm components to the App component.
LoginForm Component Code:
NavBar Component Code:
App Component Code:
Let’s take a look at the styles.css file:
All the images above, they are all set up. I will explain them step by step. After we have all of our components set up. We know that the App is the parent component. NavBar and LoginForm are the child components. We import NavBar and LoginForm to the App because we want them to show in the website page(App component is inside the index component).
Now, we are going to import useState Hook from React import React, { useState } from “react”; in order to use State Hook. Let’s declare a State variable for our popup form, which we’ll call it isShowLogin. Our variable is called isShowLogin, but we could call it anything else, like isShow or apple. I recommend calling the variable something that makes sense to you. When you go back look at the variable, you will immediately know what this State uses for. We call the variable isShowLogin, so we know it’s for our popup login form. When the app gets very big, we want to make sure we know what is everything used for.
Next, we are going to make an arrow function called handleLoginClick. This function is for us to use the setIsShowLogin to update our state. Then we are going to pass down the handleLoginClick function to NavBar because our login button is inside the NavBar component.
We have to invoke the handleLoginClick function in the NavBar component, which we have to make a handleClick function in the NavBar. So we can do onClick={handleClick} in the login button. At this moment, we have our NavBar login button setup. Now, let’s pass down the isShowLogin to LoginForm component from the app component.
In the LoginForm component, we see that our isShowLogin is inside the div className (className={`${!isShowLogin ? “active” : “”} show`}). We are not doing anything like null to hide the login form because we want to use CSS to hide the form for us.
This is the basic CSS setting:
.Show{
-Transition property is 800ms : the duration of the animation 800 milliseconds=0.8 second. We can set it to any speed we want, but we don’t want it to move slow and fast. 800 millisecond is good.
-Opacity is 1 : not transparent when the login form shows up
}
.show.active {
-transform: translateY(100px) : it will move the object to the Y axis, scale(0) : scale down the current object to 0 = disappear, and rotateY(180deg): rotate the form in 180 degree
-Opacity is 0 : transparent in the beginning
}
As we all can see that our form doesn’t show up in the beginning because we set it to false in our useState(false). If we remove the .show.active in CSS, the login form will not hide anymore. Hope you all enjoy reading this React State Hook and CSS animation blog.
Please try it on your own. I’ve attached the link to CodeSandbox below. You can test everything out there. Please let me know if something is still confused or I miss something. Thank you so much for reading my blog.
