react-crazy-modal

• A versatile animated modal component for ReactJS
• See a LIVE DEMO

.

Install

npm install react-crazy-modal

or

yarn add react-crazy-modal

.

Usage

import React, { useState } from "react";
import CrazyModal from "react-crazy-modal";

const buttonStyle = {
   width: "220px",
   backgroundColor: "#8291e3",
   color: "#fff",
   fontWeight: 600,
   fontSize: "30px",
   padding: "10px",
};

const modalStyle = {
   backgroundColor: "#fff",
   display: "flex",
   alignItems: "center",
   flexDirection: "column",
   padding: "10px",
   borderRadius: "5px",
};

const animations = {
   modal: {
      appear: "showByDownSlide",
      disappear: "fadeByUpSlide",
      time: 200,
      timingFunction: "ease",
   },
   background: {
      appear: "showByOpacity",
      disappear: "fadeByOpacity",
      time: 300,
      timingFunction: "ease",
   },
};

function App() {
   const [modalOpen, setModalOpen] = useState(false);

   return (
      <div>
         <CrazyModal
            open={modalOpen}
            onBackGroundClick={() => setModalOpen(false)}
            animations={animations}
         >
            <div style={modalStyle}>
               <h1>Crazy Modal</h1>
               <h3>Simple an easy</h3>
               <button 
                  onClick={() => setModalOpen(false)} 
                  style={buttonStyle}
               >
                  Close Modal
               </button>
            </div>
         </CrazyModal>

         <button 
            onClick={() => setModalOpen(true)}
            style={buttonStyle}
         >
            Open Modal
         </button>
      </div>
   );
}

export default App;

.

Properties

| Name | Type | Required | Default | Description | | ----------------- | ------- | -------- | ------- | ----------------------------------------------------------- | | open | boolean | false | - | State for modal open or not. | | onBackGroundClick | func | false | - | Function called when background of modal is clicked. | | animations | object | false | - | The show and Fade animations for modal and background. | | zIndex | number | false | 5 | z-index position of CrazyModal component. | | backgroundColor | string | false | #000 | The color for background of modal. | | backgroundOpacity | number | false | 0.5 | The opacity for background of modal. | | modalPositions | object | false | - | Top, Bottom, Right and Left positions of modal. See bellow. |

.

Animations

<CrazyModal
   animations={{
      modal: {
         appear: "showByDownSlide",    // See bellow available appear animations
         disappear: "fadeByDownSlide", // See bellow available disappear animations
         time: number,
         timingFunction: string,
      },
      background: {
         appear: "showByDownSlide",    // See bellow available appear animations
         disappear: "fadeByDownSlide", // See bellow available disappear animations
         time: 300,                    // Time of animations in milliseconds
         timingFunction: "ease",       // Speed curve of animation. All css animation-timing-function are available 
      };
   }}
>
   Modal Content
</CrazyModal>

Appear and Desappear Animations

| appear | disappear | | -------------------- | -------------------- | | "showByDownSlide" | "fadeByDownSlide" | | "showByRightSlide" | "fadeByRightSlide" | | "showByUpSlide" | "fadeByUpSlide" | | "showByLeftSlide" | "fadeByLeftSlide" | | "showByOpacity" | "fadeByOpacity" | | "showByApproachSpin" | "fadeByApproachSpin" |

.

Modal Positions

<CrazyModal
   modalPositions= {{
      top: "20px",
      bottom: "20px",
      right: "20px",
      left: "20px",
   }}
>
   Modal Content
</CrazyModal>

.

License

Code released under MIT License.