Rc-global-modal NPM

rc global modal

manage modal using global state in react project
Try it out with Storybook

Installation

npm i rc-global-modal

Features

Open and close modal from anywhere in the app(inside ModalProvider)
Custom CSS style for modal and overlay
Ref for modal container and overlay
Choose animation type and duration for modal

Props

Props	Types	Required	Default	Description
children	`React.FC`	✅		component that will be displayed inside modal
id	`string \\| number`	✅		unique id for modal
closeOnOverlayClick	`boolean`	❌	`true`	close modal when overlay is clicked
modalContainerClassName	`string`	❌		class name for modal container
overlayClassName	`string`	❌		class name for overlay
modalContainerStyle	`React.CSSProperties`	❌		custom style for modal container
overlayStyle	`React.CSSProperties`	❌		custom style for overlay
closeOnEsc	`boolean`	❌	`true`	close modal when esc key is pressed
modalContainerRef	`React.RefObject`	❌		ref for modal container
overlayRef	`React.RefObject`	❌		ref for overlay
animationType	`'fade' \\| 'slideUp' \\| 'slideDown' \\| 'slideLeft' \\| 'slideRight' \\| 'zoom'`	❌	`fade`	animation type for modal
animationDuration	`number`	❌	`300`	animation duration for modal

Usage

Wrap your app with ModalProvider component

import { ModalProvider } from 'rc-global-modal';

function App() {
  return (
    <ModalProvider>
      <Home />
    </ModalProvider>
  );
}

Use Modal component to display modal(must be inside ModalProvider)

import { Modal } from 'rc-global-modal';

const Home = () => {
  return (
      <Modal id={1}>
        <h1>IdOneModal</h1>
      </Modal>
  );
};

Use openModal and closeModal function to open and close modal(must be inside ModalProvider)

import { Modal, useModal } from 'rc-global-modal';

const Home = () => {
  const { openModal, closeModal } = useModal();
  return (
    <div>
      <button onClick={() => openModal(1)}>open Id One modal</button>
      <Modal id={1}>
        <h1>IdOneModal</h1>
        <button onClick={closeModal}>close modal</button>
      </Modal>
    </div>
  );
};

Examples

import { Modal, useModal } from 'rc-global-modal';

const Home = () => {
  const { openModal, closeModal } = useModal();
  return (
    <div>
      <button onClick={() => openModal(1)}>open Id One modal</button>

      <button onClick={() => openModal(2)}>open Id Two modal</button>

      <Modal id={1}>
        <h1>IdOneModal</h1>
        <button onClick={closeModal}>close modal</button>
      </Modal>

      <Modal id={2}>
        <h1>IdTwoModal</h1>
        <button onClick={closeModal}>close modal</button>
      </Modal>
    </div>
  );
};

export default Home;