Need a simple modal that just works? react-simple-hook-modal
is just that!
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
react-simple-hook-modal
has a super simple API and utilises React hooks.
<ModalProvider/>
<Modal/>
wherever you want to display a modal
<ModalProvider/>
useModal
hook to control your modal’s stateModalTransition
enum to optionally set the transition animation
NONE
to disable the transitionsimport {
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>
);
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.See the example
directory in the repository for a full example including multiple stacked modals.
Click here to see a live demo of react-simple-hook-modal
in action!
If you have any issues, please create an issue here on GitHub.
Author: mbrookson
Demo: https://react-simple-hook-modal.now.sh/
Source Code: http://github.com/mbrookson/react-simple-hook-modal
#react #reactjs #javascript