global-modal
Wonderfully lightweight package for using modals in a react app.
Instalation
using npm:
npm install global-modal
using yarn:
yarn add global-modal
usage
The ModalProvider component should wrap the whole app as children. (recommended use is as instant father of the main component)
example
in the src/index.tsx
import { ModalProvider } from 'global-modal';
...
root.render(
<React.StrictMode>
<ModalProvider>
<App />
</ModalProvider>
</React.StrictMode>
);
...
in the src/ComponentWithModal.tsx
const {show, close, visible} = useModal(<ModalComponent />)
the useModal
hook gets <ModalComponent />
as input and returns two methods (show and close) and one value (visible) as output:
-
<ModalComponent />
: This is a custom component which you want to appear in the modal. -
show
: this method can get two values as inputs:- The first one is the modal component (with type
JSX.Element
) for showing the modal with different component than the default one - The second one is an object (with type
ModalOptions
) which supports one option only at this time (thedisableDismissOnOutsideClick
with type boolean).
- The first one is the modal component (with type
here's a full example of how to use this package in code sandbox.