Add A Modal to A React App with Rodal and Reactjs-popup

Add A Modal to A React App with Rodal and Reactjs-popup

Modals are something that we have to add often into our React app.

Modals are something that we have to add often into our React app.

To make this task easier, we can use existing component libraries to add them.

In this article, we’ll look at how to add a modal into our React app with the Rodal and Reactjs-popup libraries.

Rodal

We can add the Rodal library by running:

npm i rodal --save

Then we can use it by writing:

import React, { useState } from "react";
import Rodal from "rodal";
import "rodal/lib/rodal.css";

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <div>
        <button onClick={() => setVisible(true)}>show</button>
        <Rodal visible={visible} onClose={() => setVisible(false)}>
          <div>Content</div>
        </Rodal>
      </div>
    </div>
  );
}

We import the Rodal library with its styles.

Then we set the visible prop to the visible state so that we can control when it’s shown.

We set visible to true to show the modal.

onClose is run when we click the close button.

In it, we call setVisible with false to close the modal.

It has many other options available as props.

width sets the wdith. height sets the hrigjt.

showMask controls whether we show a mask.

animation sets the animation type.

enterAnimation and leaveAnimation sets the animation for when the modal is shown or hidden..

duration sets the duration of the animation.

closeOnEsc lets us close the modal when we press escape.

javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

What is JavaScript - Stackfindover - Blog

What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript compound assignment operators

We use assignment operator in JavaScript to store values in a variable. Read more...