Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on March 15, 2023

 

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

 

 

JavaScript
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.

 

 

Recent Posts

  • React.js react-awesome-modal Example to Show Popup Modal With Animation in Browser Using Javascript
  • Node.js Express Server Side Form Validation With Custom Error Messages Using express-validator Library in Javascript
  • Node.js Express Project to Validate User Form Data Using joi Schema Validation Library Full Example
  • Node.js Puppeteer Project to Export Handlebars Resume Template to PDF Document in Express Using Javascript
  • Node.js Express Passwordless Login Example to Send Magic Auth Link Using Nodemailer
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme