Hrnet Modal Plugin

A lightweight, accessible and reusable React Modal component, originally built for the HRnet project (OpenClassrooms).

This plugin provides:

• A fully custom React modal (no jQuery, no external modal libraries)
• Keyboard accessibility (Escape key, focus management)
• Click-outside closing

Installation

Using npm :

npm install @aalexandree-g/hrnet-modal

Using yarn :

yarn add @aalexandree-g/hrnet-modal

Basic usage (with state)

import { HrnetModal, useHrnetModal } from '@aalexandree-g/hrnet-modal'

export default function Example() {
  const { isOpen, open, close } = useHrnetModal()
  return (
    <>
      <button onClick={open}>Open modal</button>
      <HrnetModal
        isOpen={isOpen}
        title="Success"
        message="Employee has been added !"
        variant="success"
        onClose={close}
      />
    </>
  )
}

Props

| Prop | Type | Default | Description | | ----------- | -------- | ------------- | ------------------------------- | | isOpen | boolean | — | Wether the modal is visible | | title | string / JSX | — | Title displayed in the modal | | message | string / JSX | — | Optional message below the title | | variant | "success" / "error" | "success" | Visual styling of the modal | | onClose | function | — | Called when the modal requests to close |

Hook : useHrnetModal()

| Return value | Type | Description | | ------------ | ---------------- | ------------------------ | | isOpen | boolean | Current open / close state | | open | function | Opens the modal | | close | function | Closes the modal |