Animation Modal React
Customizable react modal with multiple animations.
Demo
https://react-animation-modal.netlify.app/
Installation
To install, you can use npm or yarn:
npm install --save animation-modal-react
OR
yarn add animation-modal-react
Usage
import React, { useState } from 'react';
import AnimationModal from 'animation-modal-react'
const App = () => {
const [visible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(true)}>Show Modal</button>
<AnimationModal visible={visible} onHide={() => setVisible(false)}>
<div>Modal Content</div>
</AnimationModal>
</div>
);
};
export default App;
import React, { useState } from 'react';
import AnimationModal from 'animation-modal-react'
const App = () => {
const [visible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(true)}>Show Modal</button>
<AnimationModal
visible={visible}
onHide={() => setVisible(false)}
size="fullScreen"
pattern="wave_in_left"
closeIcon={<MyIcon />}
overlayClassName="my-overlay-className"
contentClassName="my-content-className"
closeClassName="my-close-icon-className"
>
<div>Modal Content</div>
</AnimationModal>
</div>
);
};
export default App;
Accepted Props
Name | Type | Description |
---|---|---|
visible (required) | boolean |
Set the visibility of the Modal. |
onHide | callback |
A callback fired when either the overlay is clicked. |
onOverlayClick | callback |
A callback fired when the overlay, if specified, is clicked. |
closeOnOverlayClick (default true ) |
boolean |
A boolean to close modal on overlay click. |
animation (default fade_in ) |
enum: bounce_in_down, bounce_in_left, bounce_in_right, bounce_in_up, bounce_in, bounce, fade_in_down, fade_in_down, fade_in_left, fade_in_right, fade_in_up, fade_in, flip_in_x, flip_in_y, flip, rotate_in_down_left, rotate_in_down_right, rotate_in_up_left, rotate_in_up_right, rotate_in, slide_in_down, slide_in_left, slide_in_right, slide_in_up, zoom_in_down, zoom_in_left, zoom_in_right, zoom_in_up, zoom_in, wave_in_down, wave_in_left, wave_in_right, wave_in_up, roll_in_down, roll_in_left, roll_in_right, roll_in_up, roll, flash, hinge, jack_in_box, jello, pulse, rubber_band, shake, swing, vibrate, wobble
|
An enum to control animations for the modal. |
closeIcon | ReactElement |
Replace the default Close Icon. |
size (default md ) |
enum/string: sm, md, lg, xl, fullScreen, (number)px, (number)%
|
An enum to control the modal size. |
overlayClassName | string |
To replace/override the default overlay styles. |
contentClassName | string |
To replace/override the default content styles. |
closeClassName | string |
To replace/override the default close icon styles. |