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

Project Created & Maintained By

Divyanshu Shekhar

Aniket Pathak

Stargazers

Forkers

Copyright & License

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