[React] Modal with Backdrop and slide animation effects

Let’s assume there is a user story with the following requirements:

  • An overlay modal
  • A backdrop that can close the modal by clicking anywhere outside the modal area
  • Sliding up & down animation effects when opening and closing the modal

Setup

Install a dependency for animation:

$ npm install react-transition-group --save

Add two divs with id backdrop-root and overlay-root are added to index.html. These will be used to create portals.

Implementation

First of all, create Backdrop component. Notice this component has a click event handler in order to close the modal when user clicks outside the modal area.

Then, create ModalPortal component to create portals.

Here is the modal content. Let’s show a header and a button for closing the modal. Notice that CSSTransition from react-transition-group is applied for some animation effects. For this to work properly, we will need to define a couple of classes (modal-enter-active & modal-exit-active) in CSS. Refer to this page for more information regarding CSSTransition.

Also, I added a state to verify that the state gets cleared up when closing the modal and then gets set back to the initial value when the modal is opened again.

Here is our main component.

Lastly, applying some styles

Demo:

--

--

--

https://www.linkedin.com/in/jaesik-kim-706b4a84

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Make professional mobile apps with React Native and Typescript — Understand Hooks.

7 Cheatsheets You Might Wanna Know About

Structuring React Components for Easy Imports

How to create a pipe in angular and test it using Jasmine

Accessing DOM Elements in React

Developing UIs using Storybook

What Makes Node.Js Powerful & Why Should You Choose It For Your Next Project?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
J.Kim

J.Kim

https://www.linkedin.com/in/jaesik-kim-706b4a84

More from Medium

How does useState() hook works(React Native Example)?

How to Authenticate in Azure and GraphQL using Expo AuthSession

Read the latest news! Integration of Huawei Push Kit in Application using React Native

How to implement multiple layouts using React router V4