Skip to content

Animated modal dialogs for React, easy to use pre-built components for smooth and visually appealing user interactions.

License

Notifications You must be signed in to change notification settings

dorbus/react-animated-modal

Repository files navigation

React Animated Modal Logo

React Animated Modal

GitHub GitHub release (latest by date including pre-releases GitHub top language GitHub Repo forks GitHub Repo stars GitHub package.json dependency version (prod) GitHub Repo stars Github Repo Sponsors

React component library for modals with animation.

This component library is inspired from Jesse Couch's Animated Modal codepen.

Demo

Installation

yarn

yarn add @dorbus/react-animated-modal

npm

npm install @dorbus/react-animated-modal

Usage

To use Animated Modal in your application, first import AnimatedModal, AnimatedModalObject, ModalAnimation and AnimatedModalFrame.

Ref

Create a Ref object using useRef and pass it to the AnimatedModal Component.

const ref = useRef<AnimatedModalObject>(null);

<AnimatedModal ref={ref} />

Opening modal

// Open modal
ref.current?.OpenModal()

// Open modal with animation
ref.current?.OpenModal(ModalAnimation.Reveal)

Closing modal

ref.current?.CloseModal()

Modal Animations

For now, the library supports seven different animations:

  • Unfold: ModalAnimation.Unfold
  • Reveal: ModalAnimation.Reveal
  • Uncover: ModalAnimation.Uncover
  • Flash: ModalAnimation.Flash
  • Slide: ModalAnimation.Slide
  • BlowUp: ModalAnimation.BlowUp
  • Sketch: ModalAnimation.Sketch

Using Animations

Use animation prop to enable different animations, by default the animation is of type Unfold.

<AnimatedModal
    ref={ref}
    animation={ModalAnimation.Unfold}/>

API

Component Prop Type Description Default
AnimatedModal startOpen boolean State open state of the modal in start false
animation ModalAnimation Different modal animations ModalAnimation.Unfold
closeOnBackgroundClick boolean Whether the modal should close on background click true
backgroundStyle CSS Pass custom background styles -
modalStyle CSS Pass custom modal styles -

Project Created & Maintained By

Divyanshu Shekhar

GitHub followers

Aniket Pathak

GitHub followers

Stargazers

Stargazers repo roster for @dorbus/react-animated-modal

Forkers

Forkers repo roster for @dorbus/react-animated-modal

Copyright & License

Code and documentation Copyright (c) ISC © 2022 Dorbus.