@daphaz/hrnet-modal v1.0.1

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:

$ 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.

Default

Use open prop to control modal displayed

Prevent Close

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

Modal Components

Use can use three components already styled:

• Modal.Header
• Modal.Body
• Modal.Footer

<Modal>
  <Modal.Header>my Header</Modal.Header>
  <Modal.Body>my Body</Modal.Body>
  <Modal.Footer>my Footer</Modal.Footer>
</Modal>

Extras

Use can use a useModal hooks for provide already all state as you needed for modal controls

type useModal = (initialVisible: boolean) => {
  visible: boolean;
  setVisible: Dispatch<SetStateAction<boolean>>;
  currentRef: MutableRefObject<boolean>;
  controls: {
    open: boolean;
    onClose: () => void;
  };
};

And also if you need to close the Modal in other place use the context

import { useModalContext, Modal } from '@daphaz/hrnet-modal';

const App = () => {
  const { close } = useModalContext();

  return <button onClick={close}>close modal</button>;
};