React: Create a Popup Form for Login and then Style it

If you are building a web application that requires user authentication or registration, you'll need a way to display login and registration forms to your users. One popular approach is to use a popup form that appears when the user clicks a button. In this blog post, I will walk you through how to create a popup form for login and user creation using React.

Before we get started, let me introduce myself. I am a beginner in coding, just like many of you. I have been learning to code for a short while and I am writing in very general terms. I want to share my learning journey with you all and hopefully inspire others who are just starting out.

To create a popup form, we will use React hooks to manage the state of the form. We'll also use some CSS to style the form and make it look like a popup. Let's start with the login form.

The Login Form

To create the login form, we'll need to add some state to our App component. We'll use a Boolean state variable called seen to toggle the visibility of the popup form. We'll also add a function called togglePop to handle the toggle. Here's what our updated App component looks like:

function App() {
    const [seen, setSeen] = useState(false)

    function togglePop () {
        setSeen(!seen);
    };

    return (
        <div>
            <button onClick={togglePop}>Login</button>
            {seen ? <Login toggle={togglePop} /> : null}
        </div>
    )
}

As you can see, we've added a button to our component that calls the togglePop function when clicked. We've also added some logic to conditionally render the login form based on the state of the seen variable. If seen is true, we'll render the Login component, otherwise, we'll render nothing.

Now, let's create the Login component. Here's what it looks like:

function Login(props) {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')

    function handleLogin(e) {
        e.preventDefault()
        // Code to handle login goes here
        props.toggle()
    }

    return (
        <div className="popup">
            <div className="popup-inner">
                <h2>Login</h2>
                <form onSubmit={handleLogin}>
                    <label>
                        Username:
                        <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
                    </label>
                    <label>
                        Password:
                        <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
                    </label>
                    <button type="submit">Login</button>
                </form>
                <button onClick={props.toggle}>Close</button>
            </div>
        </div>
    )
}

The Login component has two state variables: username and password. We've also added a function called handleLogin that will handle the login when the user submits the form. When the form is submitted, we'll prevent the default behavior, call the function to handle the login, and close the popup form.

To style the popup form, we'll create a new CSS file and import it into our App component. Here's the CSS code:

.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}

.popup-inner {
background-color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width: 40%;
}

.popup-inner h2 {
margin-top: 0;
}

.popup-inner label {
display: block;
margin-bottom: 10px;
}

.popup-inner input {
width: 100%;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}

.popup-inner button[type="submit"],
.popup-inner button[type="button"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-right: 10px;
cursor: pointer;
border-radius: 5px;
}

.popup-inner button[type="submit"]:hover,
.popup-inner button[type="button"]:hover {
background-color: #45a049;
}

.popup-inner button[type="submit"] {
margin-top: 20px;
}

.popup-inner button[type="button"] {
margin-top: 20px;
background-color: #f44336;
}

.popup-inner button[type="button"]:hover {
background-color: #da190b;
}

.popup-inner button[type="submit"]:disabled {
background-color: #bfbfbf;
color: #ffffff;
cursor: not-allowed;
}

.popup-inner button[type="button"]:disabled {
background-color: #bfbfbf;
color: #ffffff;
cursor: not-allowed;
}

The CSS code styles the popup form using the .popup and .popup-inner classes. The .popup class positions the form in the center of the screen with a semi-transparent black background. The .popup-inner class styles the form itself with a white background, a box shadow, and rounded corners.

We've also added some styles for the form elements, such as the input fields, buttons, and labels. The styles give the form a clean and modern look and feel.

Conclusion

In this blog post, we've shown you how to create a popup form for login and user creation using React. We've used React hooks to manage the state of the form, and we've added some CSS to style the form and make it look like a popup.

If you're building a web application that requires user authentication or registration, a popup form is a great way to present the login and registration forms to your users. It's a simple and effective way to keep the forms out of the way until the user needs them, and it's easy to implement with React.

I hope you found this blog post helpful. If you have any questions or feedback, feel free to leave a comment below.