\n\n## Note\n\n> This is a reference of one of the components library in [this project](\"https://github.com/Daphaz/DamienBonnet_14_ui_03072022\")\n\n## Table of Contents\n\n- [Installation](#installation)\n- [API documentation](#API-documentation)\n\n## Installation\n\nFor 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.\n\nTo install, you can use [npm](\"https://www.npmjs.com/\") or [yarn](\"https://yarnpkg.com/\"):\n\n```sh\n$ npm install --save @daphaz/hrnet-modal\n$ yarn add @daphaz/hrnet-modal\n```\n\n## API documentation\n\n> Displays a dialog with a custom content that requires attention or provides additional information.\n\n### Default\n\nUse `open` prop to control modal displayed\n\n| Name | Description | Default |\n| ---------------- | :------------: | ------: |\n| **open** | `boolean` | - |\n| **preventClose** | `boolean` | `false` |\n| **closeButton** | `boolean` | `false` |\n| **onOpen** | `(() => void)` | - |\n| **onClose** | `(() => void)` | - |\n| **className** | `string` | `\"\"` |\n\n### Prevent Close\n\nWith `preventClose` props you can't close the Modal by clicking on Backdrop\n\n### Modal Components\n\nUse can use three components already styled:\n\n- Modal.Header\n- Modal.Body\n- Modal.Footer\n\n```tsx\n\n my Header\n my Body\n my Footer\n\n```\n\n### Extras\n\nUse can use a `useModal` hooks for provide already all state as you needed for modal controls\n\n```ts\ntype useModal = (initialVisible: boolean) => {\n visible: boolean;\n setVisible: Dispatch>;\n currentRef: MutableRefObject;\n controls: {\n open: boolean;\n onClose: () => void;\n };\n};\n```\n\nAnd also if you need to close the Modal in other place use the context\n\n```tsx\nimport { useModalContext, Modal } from '@daphaz/hrnet-modal';\n\nconst App = () => {\n const { close } = useModalContext();\n\n return ;\n};\n```\n","readmeFilename":"README.md"}
![\"Version\"](\"https://badge.fury.io/js/@daphaz%2Fhrnet-modal.svg\"){kind=icon}
\n \n