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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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; |
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.