@tgodfreyarul/hrnet-react-modal

Lightweight React confirmation modal extracted from the HRnet migration project.

Purpose

This package replaces the jQuery confirmation modal used in the legacy HRnet app with a simple React component.

It is intentionally small:

• open / close with React state
• close on backdrop click
• close with a dedicated button

Prerequisites

• Node.js 18 or newer
• A React application using React 18 or React 19

Repository

• GitLab: https://gitlab.com/tgodfreyarul/projet-14-hrnet-modal-openclassrooms

Installation

npm install @tgodfreyarul/hrnet-react-modal

Usage

import { useState } from 'react'
import { Modal } from '@tgodfreyarul/hrnet-react-modal'
import '@tgodfreyarul/hrnet-react-modal/style.css'

function Example() {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <>
            <button type="button" onClick={() => setIsOpen(true)}>
                Open modal
            </button>

            <Modal
                isOpen={isOpen}
                title="Employee Created!"
                onClose={() => setIsOpen(false)}
            />
        </>
    )
}

Props

isOpen

• Type: boolean
• Controls whether the modal is rendered

title

• Type: ReactNode
• Main content displayed inside the modal

onClose

• Type: () => void
• Called when the user clicks the backdrop or the Close button

Published files

The package publishes:

• dist/hrnet-react-modal.js
• dist/hrnet-react-modal.cjs
• dist/hrnet-react-modal.css
• dist/index.d.ts

Local development

npm install
npm run build

The production files are generated in the dist folder.