react-simple-hook-modal

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

View Demo View Github

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][tailwind] 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.

Issues

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

GitHub