Modal component HRnet

This is a modal component for React. Developped for a student project and used in P14-hrnet

Prerequisites

• Node.js (Version 18.12.1)
• NPM
• (Recommended IDE) VSCode

My Table of Content

• Installation
• Usage
• Props

Installation

You can install the modal-component-hrnet package using npm:

npm install @antoinea95/modal-component-hrnet

Usage

Import Modal in your React component:

import { Modal } from '@antoinea95/modal-component-hrnet';

Implement Modal in your React component:

function MyComponent() {
  const [isShow, setIsShow] = useState(false)

  return (
    <div>
        <button onClick={() => setIsShow(true)}>Open Modal</button>
        <Modal
          onClose={() => setIsShow(false)}
          isShow={isShow}
          setIsShow={setIsShow}
          timeOut={3000} //optionnal, if you want modal close automatically
        >
        <p> This is a Modal </p>
        </Modal>
      </div>
  )
}

You can also display Modal without an Opening button, this an exemple with a confirmed Form :

function MyComponent() {
  const [isShow, setIsShow] = useState(false)

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsShow(true);
  }

  return (
    <>
    <form onSubmit={(e) =>{handleSubmit(e)}}>
        <label htmlFor="email">E-mail</label>
        <input type="email" name="email" id="email" />

        <label htmlFor="password">Password</label>
        <input type="password" name="password" id="password" />

        <button type="submit"> Se connecter </button>
    </form>
    <Modal
      onClose={() => setIsShow(false)}
      isShow={isShow}
      setIsShow={setIsShow}
      timeOut={3000} //optionnal, if you want modal close automatically
      >
        <p> User connected </p>
    </Modal>
  )
}

Props

The Modal component props you need:

| Prop | Type | Description | Required | Default Value | | ---- | ---- | ----------- | -------- | ------------- | | children | React.node | The content of your modal, it can be anything you want | Yes | - | | onClose | () => void | Callback function to be called when the modal is closed. | Yes | - | | isShow | boolean | Boolean indicating whether the modal is open or closed. | Yes | - | | setIsShow | () => void | Callback function to change isShow value | Yes | - | | timeOut | number | Number in miliseconds to close Modal automatically | No | - |