hrnet-modal

Note

> This is a reference of one of the components library in this project

Table of Contents

- Installation
- API documentation

Installation

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
`

API documentation

> Displays a dialog with a custom content that requires attention or provides additional information.

$3

Use open prop to control modal displayed

| Name | Description | Default |
| ---------------- | :------------: | ------: |
| open | boolean | - |
| preventClose | boolean | false |
| closeButton | boolean | false |
| onOpen | (() => void) | - |
| onClose | (() => void) | - |
| className | string | "" |

$3

With preventClose props you can't close the Modal by clicking on Backdrop

$3

Use can use three components already styled:

- Modal.Header
- Modal.Body
- Modal.Footer

`tsx

my Header
my Body
my Footer

`

$3

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 close modal;
};
``