Adds HTML Dialog capabilities as custom hooks
Statements | Branches | Functions | Lines |
---|---|---|---|
npm install --save react-use-modals
- You can use it as follows by destructuring its return object:
import React from 'react';
import useModals from 'react-use-modals';
const MyComponent = () => {
const { modalRef, isOpen, openModal, closeModal } = useModals();
return (
<>
<button onClick={openModal}>Open Modal</button>
<dialog ref={modalRef}>
<p>Modal Content</p>
<button onClick={closeModal}>Close Modal</button>
</dialog>
<p>Modal is {isOpen ? 'open' : 'closed'}</p>
</>
);
};
- You can also use it with a return array just like React does:
- This is particularly useful when you must use multiple
useModals
.
import React from 'react';
import useModals from 'react-use-modals';
const MyComponent = () => {
const [modalRef, isOpen, openModal, closeModal] = useModals({
preventCloseOnEscape: true,
});
const [modalRef2, isOpen2, openModal2, closeModal2] = useModals({
closeOnBackdropClick: true,
onCloseCallback: (modalId) =>
console.log(`modal with id: ${modalId} closed!`),
});
return (
<>
<button onClick={openModal}>Open Modal</button>
<dialog ref={modalRef}>
<p>Modal Content</p>
<button onClick={closeModal}>Close Modal</button>
</dialog>
<p>Modal is {isOpen ? 'open' : 'closed'}</p>
<br />
<br />
<br />
<button onClick={openModal2}>Open Modal2</button>
<dialog ref={modalRef2} id="modal-id-2">
<p>Modal2 Content</p>
<button onClick={closeModal2}>Close Modal2</button>
</dialog>
<p>Modal2 is {isOpen2 ? 'open' : 'closed'}</p>
</>
);
};
useModals()
accepts the following options:
key | description | arguments | example |
---|---|---|---|
closeOnBackdropClick | Boolean controlling closing on backdrop click | N/A | N/A |
preventCloseOnEscape | Boolean controlling closing on escape key click | N/A | N/A |
onCloseCallback | Function callback run when closing. Receives modal id if available | modalId?: string | (modalId) => console.log(`modal with id: ${modalId} closed!`) |
And useModals()
returns:
- An object/tupple with the following keys:
key | description | arguments | example |
---|---|---|---|
isOpen | Boolean stating state of open or closed | N/A | N/A |
modalRef | HTMLDialogElement ref | N/A | N/A |
openModal | Function to open modal | N/A | N/A |
closeModal | Function to open modal | N/A | N/A |
- PS.: If you need to change backdrop's CSS, please do use its pseudo-element as per documentation, like so:
dialog::backdrop {
background: rgba(255, 0, 0, 0.25);
}
Thanks goes to these wonderful people (emoji key):
Olavo Parno 🤔 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
react-use-modals is MIT licensed.
This hook is created using create-react-hook.