Sg-modal-lib NPM

SG Modal Library

sg-modal-lib is a simple and flexible React library for creating and managing modals in your web applications. It allows you to easily create custom modals with themes and configurations.

Features

Easy to use : Simple library for creating modals.
Customizable : Apply different themes (light/dark) and custom button text.
Lightweight : Built with minimal dependencies to keep your bundle size small.
Tested : Thoroughly tested with unit tests to ensure reliability and performance.
Accessible : Designed with accessibility in mind, following best practices to ensure usability for all users.
Responsive : Adapts seamlessly to various screen sizes and devices for a consistent user experience.
Flexible : Supports various modal types (confirmation, alert, etc.) to meet diverse use cases.
Easy integration : Works well with popular frameworks and libraries, making it simple to implement in existing projects.

Installation

Prerequisites

NodeJS (^20.11.1)
npm (^10.2.4)
IDE (VSCode recommended)

To install the sg-modal-lib library, you can use npm, pnpm or yarn :

npm install sg-modal-lib

pnpm install sg-modal-lib

yarn add sg-modal-lib

Usage

Here's a basic example of how to use the Modal component in your React application :

import { useState } from 'react';
import { Modal } from 'sg-modal-lib';
import 'sg-modal-lib/style.css'; // Import default styles function

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = () => {
    setIsModalOpen((prevIsOpen) => !prevIsOpen);
  };

  return (
    <div>
      <button onClick={toggleModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        toggleModal={toggleModal}
        title='Title' /* Optionnal, default to null */
        btnText='close' /* Optionnal, default to null */
        escapeClose={false} /* Optionnal, default to true */
        overlayClickClose={false} /* Optionnal, default to true */
        showClose={false} /* Optionnal, default to true */
        fadeDuration={300} /* Optionnal, default to 0 */
        styleTheme='dark' /* Optionnal, default to light */
      >
        <p>This is the content inside the modal!</p>
      </Modal>
    </div>
  );
};

export default App;

Props

Modal

The Modal component accepts the following props : | Name | Type | Required | Default value | Description | | --- | --- | --- | --- | --- | | isOpen | boolean | yes | / | Indicates whether the modal is open or closed | | toggleModal | function | yes | / | Function to toggle the modal's visibility | | children | React.ReactNode | yes | / | The content to be displayed inside the modal | | escapeClose | boolean | no | true | Allows the user to close the modal by pressing ESC | | overlayClickClose | boolean | no | true | Allows the user to close the modal by clicking the overlay | | showClose | boolean | no | true | Shows a (X) icon/link in the top-right corner | | title | string | no | null | The title of the modal, displayed on top if provided. If no provided, it's not displayed. | | btnText | string | no | null | The text for the additionnal bottom to close the modal, if provided. If no btnText provided, no button is displayed. | | styleTheme | string | no | light | Optional theme for the modal (e.g., 'light', 'dark'). | | fadeDuration | number | no | 0 | Number of milliseconds the fade transition takes |