kz-react-modal

A simple accessible and reusable React modal component.

This plugin provides a lightweight modal with keyboard accessibility and easy integration into any React project.

Installation

Install the package with npm:

npm install kz-react-modal

or with pnpm:

pnpm add kz-react-modal

Usage

Import the modal component in your React application:

import Modal from "kz-react-modal";

Example usage:

import { useState } from "react";
import Modal from "kz-react-modal";

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

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

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Employee created"
      >
        <p>Your Text/p>
      </Modal>
    </>
  );
}

export default App;

Props

| Prop | Type | Description | |-----|-----|-----| | isOpen | boolean | Controls whether the modal is visible | | onClose | function | Function called when the modal is closed | | title | string | Optional title displayed in the modal | | children | ReactNode | Content displayed inside the modal | | className | string | Optional class to customize the modal styles |

Features

• Simple React modal component
• Keyboard accessible (ESC key closes the modal)
• Overlay click closes the modal
• Accessible with role="dialog" and aria-modal
• Customizable with CSS
• Lightweight and dependency-free

Customization

You can customize the modal style by using the className prop.

Example:

<Modal
  isOpen={isOpen}
  onClose={closeModal}
  className="custom-modal"
>
  <p>Custom content</p>
</Modal>

Example CSS:

.custom-modal {
  background: #2d2d2d;
  color: white;
}

Accessibility

This modal component includes basic accessibility features:

• ESC key closes the modal
• role="dialog" for screen readers
• aria-modal="true" support
• Click outside to close the modal

Development

To run the project locally:

pnpm install
pnpm dev

The modal can be tested using the local development environment provided by Vite.

Author

Created by KZKO as part of the HRnet modernization project.

License

MIT