1.0.1 • Published 2 years ago
react-action-modal-hook v1.0.1
react-action-modal-hook
NOTE
A minimalist React Modal Hook using the dialog tag.
If you have any feedback, please feel free to create an issue
Usage
type Props = {
disableEsc: boolean,
unlockBodyScroll: boolean,
};
export const BlurModalTrigger: FC<Props> = ({
disableEsc = false,
unlockBodyScroll = false,
}) => {
const [isClosing, setIsClosing] = useState < boolean > false;
const onModalClose: OnModalClose = () => {
// Blur Modal Start Closing
setIsClosing(true);
return () => {
// Blur Modal Closed
setIsClosing(false);
};
};
const modalCloseDelay = () => {
return 200;
};
const [Modal, openModal, closeModal] = useModal(BlurModal, {
modalCloseDelay,
onModalClose,
disableEsc,
unlockBodyScroll,
});
return (
<>
<Button onClick={openModal}>Open Blur Modal</Button>
<Modal title='Blur Modal' {...{ isClosing, closeModal }}>
<p>
Duis cursus ex non ante porta, id maximus lorem luctus. Pellentesque
nec mauris sed odio mollis congue id sit amet nibh.
</p>
</Modal>
</>
);
};
Installation
You can install using npm
or yarn
commands.
npm install --save react-action-modal-hook
yarn add react-action-modal-hook
Syntax
[ModalComponent, openModal, closeModal, isModalOpen, dialogElement] = useModal<ModalTemplateProps>(
ModalTemplate,
{
modalCloseDelay,
onModalClose,
disableEsc,
unlockBodyScroll,
},
);
Type | Description | Required | |
---|---|---|---|
ModalComponent | React.FC | Registered Modal Component | |
openModal | () => void | Open the Modal | |
closeModal | () => void | Close the Modal | |
isModalOpen | boolean | Modal's toggle state | |
dialogElement | HTMLDialogElement | Dialog element wrapping the Modal | |
ModalTemplateProps | object type | Props for the registered Modal template | |
ModalTemplate | React.FC | Register Modal template | ⚪︎ |
modalCloseDelay | () => number | Milliseconds delay from closeModal start to the Modal closing Default: () => 0 Used for animations | |
onModalClose | (HTMLDialogElement) => void | () => void | Triggered when the Modal is closed. Executed after closeModal . The function returned by onModalClose will be executed after the Modal is closed. | |
disableEsc | boolean | Prevent closing the Modal using the Esc key. Default is false . | |
unlockBodyScroll | boolean | Do not lock Body scroll when the Modal is open. Default is false . |
Styles
Import CSS
Import the CSS used by the library.
import 'react-action-modal-hook/styles';
Customize CSS
You can customize the CSS as needed.
| ClassName | Description |
| :---------------------- | :--------------------------------------------------------- |
| use-modal-container
| The default style for the dialog
tag. |
| use-modal-scroll-lock
| The styles needed to lock the body scroll. |
Global Settings
Add ModalProvider
<ModalProvider>
<Component />
</ModalProvider>
The following are the props for ModalProvider
Description | |
---|---|
key | key for React.createPortal() .Reference |
others | All attributes of HTMLDialogElement |
Example
import 'react-action-modal-hook/styles';
type BlurModalProps = {
children: ReactNode,
closeModal: () => void,
isClosing: boolean,
title: string,
} & HTMLAttributes<HTMLDivElement>;
export const BlurModal: FC<BlurModalProps> = ({
children,
isClosing,
title,
closeModal,
...attributes
}) => {
return (
<div
className={clsx('use-modal-container', isClosing && '-close')}
{...attributes}
>
<div className={'background'} onClick={closeModal}></div>
<section className={'modal-body'}>
<header className={'header'}>{title}</header>
<div className={'main'}>{children}</div>
<footer className={'footer'}>
<Button onClick={closeModal}>Close</Button>
</footer>
</section>
</div>
);
};
type Props = {
disableEsc: boolean,
unlockBodyScroll: boolean,
};
export const BlurModalTrigger: FC<Props> = ({
disableEsc = false,
unlockBodyScroll = false,
}) => {
const [isClosing, setIsClosing] = useState < boolean > false;
const onModalClose: OnModalClose = () => {
// Blur Modal Start Closing
setIsClosing(true);
return () => {
// Blur Modal Closed
setIsClosing(false);
};
};
const modalCloseDelay = () => {
return 200;
};
const [Modal, openModal, closeModal] = useModal(BlurModal, {
modalCloseDelay,
onModalClose,
disableEsc,
unlockBodyScroll,
});
return (
<>
<Button onClick={openModal}>Open Blur Modal</Button>
<Modal title='Blur Modal' {...{ isClosing, closeModal }}>
<p>
Duis cursus ex non ante porta, id maximus lorem luctus. Pellentesque
nec mauris sed odio mollis congue id sit amet nibh.
</p>
</Modal>
</>
);
};
const App = () => {
return (
<ModalProvider>
<BlurModalTrigger />
</ModalProvider>
);
};
1.0.1
2 years ago
1.0.0
2 years ago
1.0.0-beta.6
2 years ago
1.0.0-beta.7
2 years ago
1.0.0-beta.5
2 years ago
1.0.0-beta.4
2 years ago
1.0.0-beta.3
2 years ago
1.0.0-beta.2
2 years ago
1.0.0-beta
2 years ago