react-simple-hook-modal

Need a simple modal that just works? react-simple-hook-modal is just that!

Installation

Simply install the package from npm and you're good to go!

npm install react-simple-hook-modal

or

yarn add react-simple-hook-modal

Usage

React

react-simple-hook-modal has a super simple API and utilises React hooks.

Simply wrap your app in <ModalProvider/>
Add instances of <Modal/> wherever you want to display a modal
- This will not render anything to the DOM here
- Modals are rendered after allthe children in side <ModalProvider/>
Use the useModal hook to control your modal's state
Use the ModalTransition enum to optionally set the transition animation
- Currently there are 3 to select from, or choose NONE to disable the transitions

import {
  ModalProvider,
  Modal,
  useModal,
  ModalTransition,
} from 'react-simple-hook-modal';
 
const MyComponent = () => {
  const { isModalOpen, openModal, closeModal } = useModal();
 
  return (
    <>
      <button onClick={openModal}>Open</button>
      <Modal
        id="any-unique-identifier"
        isOpen={isModalOpen}
        transition={ModalTransition.BOTTOM_UP}
      >
        <button onClick={openModal}>Open</button>
      </Modal>
    </>
  );
};
 
const App = () => (
  <ModalProvider>
    <MyComponent />
  </ModalProvider>
);

Styles

react-simple-hook-modal uses a subset of tailwindcss under the hood. The tailwind classes used have a prefix of rsm added to avoid potential conflicts with your own styles. You can import the default styles using:

import 'react-simple-hook-modal/dist/styles.css';

ModalProvider also takes optional props:

backdropClassName which can contain one or more classes to append and override the default styles (e.g. Changing the backdrop colour can be done by adding the class bg-blue-800).

Modal also takes optional props:

modalClassName which can contain one or more classes to append to the default modal div.

Example

See the example directory in the repository for a full example including multiple stacked modals.

Demo

Click here to see a live demo of react-simple-hook-modal in action!

Issues

If you have any issues, please create an issue here on GitHub.