This is the modal component for hrnet project
npm install @daphaz/hrnet-modal> This is a reference of one of the components library in this project
- Installation
- API documentation
For this project we use Nodejs 14.17.3, we recommand to use a nodejs version manager like _nvm_ and launch nvm use command to get the right Nodejs version.
To install, you can use npm or yarn:
``sh`
$ npm install --save @daphaz/hrnet-modal
$ yarn add @daphaz/hrnet-modal
> Displays a dialog with a custom content that requires attention or provides additional information.
Use open prop to control modal displayed
| Name | Description | Default |
| ---------------- | :------------: | ------: |
| open | boolean | - |boolean
| preventClose | | false |boolean
| closeButton | | false |(() => void)
| onOpen | | - |(() => void)
| onClose | | - |string
| className | | "" |
With preventClose props you can't close the Modal by clicking on Backdrop
Use can use three components already styled:
- Modal.Header
- Modal.Body
- Modal.Footer
`tsx`
Use can use a useModal hooks for provide already all state as you needed for modal controls
`ts`
type useModal = (initialVisible: boolean) => {
visible: boolean;
setVisible: Dispatch
currentRef: MutableRefObject
controls: {
open: boolean;
onClose: () => void;
};
};
And also if you need to close the Modal in other place use the context
`tsx
import { useModalContext, Modal } from '@daphaz/hrnet-modal';
const App = () => {
const { close } = useModalContext();
return ;
};
``