React.js react-awesome-modal Example to Show Popup Modal With Animation in Browser Using Javascript

Welcome folks today in this blog post we will be showing the popup modal with animation in browser using react-awesome-modal library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And now you need to install the below libraries using the below command as shown below

npm i react-awesome-modal

And after that you will see the below directory structure of the app as shown below

And now you need to edit the App.js file and copy paste the following code

App.js

import { useState } from "react";
import Modal from 'react-awesome-modal';

import "./App.css";

function App() {
  const [visible, setVisible] = useState(false);

  let openModal = () => {
    setVisible(true);
  };

  let closeModal = () => {
    setVisible(false);
  };

  return (
    <div className="App">
      <input type="button" value="Open" onClick={() => openModal()} />
      <Modal
        visible={visible}
        width="500"
        height="300"
        effect="fadeInRight"
        onClickAway={() => closeModal()}
      >
        <div>
          <h1>KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND</h1>
          <p>This is some content inside the modal</p>
          <a href="javascript:void(0);" onClick={() => closeModal()}>
            Close
          </a>
        </div>
      </Modal>
    </div>
  );
}

export default App;

import { useState } from "react";

import Modal from 'react-awesome-modal';

import "./App.css";

function App() {

const [visible, setVisible] = useState(false);

let openModal = () => {

setVisible(true);

};

let closeModal = () => {

setVisible(false);

};

return (

<input type="button" value="Open" onClick={() => openModal()} />

<Modal

visible={visible}

width="500"

height="300"

effect="fadeInRight"

onClickAway={() => closeModal()}

<div>

<h1>KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND</h1>

<p>This is some content inside the modal</p>

<a href="javascript:void(0);" onClick={() => closeModal()}>

</a>

</div>

</Modal>

</div>

);

}

export default App;

As you can see we are importing the react-awesome-modal library at the top and then we are showing the popup modal message and we are passing different options such as the effect and then onClickAway functions. And then we are defining all these functions at the top to show and hide the modal. And also we are toggling the visibility of the modal using the useState hook.