React Animated Modal

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

Aniket Pathak

Stargazers

Forkers

Copyright & License

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