@antoinea95/modal-component-hrnet

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	-