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. |