Installation

You can install this component via npm:

npm install hrnet-custom-modal-wealth-health

Usage

Here is a quick example of how to use the Modal in your React application.

⚠️ Don't forget to import the CSS file!

import React, { useState } from 'react';
import { Modal } from 'hrnet-custom-modal-wealth-health';
// Import the styles
import 'hrnet-custom-modal-wealth-health/dist/style.css';

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

  // Function to open the modal
  const openModal = () => setIsOpen(true);

  // Function to close the modal
  const closeModal = () => setIsOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>HRnet Dashboard</h1>
      <button onClick={openModal}>Create Employee</button>

      <Modal isOpen={isOpen} onClose={closeModal}>
        <h2>Employee Created!</h2>
        <p>The new employee has been successfully added to the system.</p>
        <div>
          <button onClick={closeModal}>Close</button>
        </div>
      </Modal>
    </div>
  );
};

export default App;

Props

| Prop | Type | Required | Description | | --- | --- | --- | --- | | isOpen | boolean | Yes | Controls whether the modal is visible (true) or hidden (false). | | onClose | function | Yes | Function called when the user clicks the overlay or the close button. | | children | node | No | The content to display inside the modal (text, forms, components...). |

Customization

The modal comes with a default clean style. However, you can easily override the CSS classes to match your branding.

CSS Classes available:

• .modal-overlay: The dark background behind the modal.
• .modal-wrapper: The white container box.
• .modal-content: The container for your children elements.
• .modal-close-btn: The default "X" close button.

Example of overriding styles:

/* In your own CSS file */
.modal-wrapper {
  background-color: #f0f0f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

.modal-close-btn {
  background-color: #93ad18 !important; /* WealthHealth Green */
  color:  !important;
}

Requirements

• node: ^22.19.0 or higher
• React: ^18.0.0 or higher
• React DOM: ^18.0.0 or higher