SG Modal Library

🖥 Tester la librairie sur CodeSandBox

🔎 Voir la librairie sur npm

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

or

pnpm install sg-modal-lib

or

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 |

Styling

The library includes default styles that can be imported using :

import 'sg-modal-lib/style.css';

You can also override these styles in your project by applying additional styles.

Css className :

• sg-modal-lib
• sg-modal-lib--open
• sg-modal-lib--close
• sg-modal-lib__dialog
• sg-modal-lib__dialog--open
• sg-modal-lib__dialog--close
• sg-modal-lib__close
• sg-modal-lib__title
• sg-modal-lib__children
• sg-modal-lib__btn

Remember to import the CSS file before your own so that you can override it.

Light theme :

Dark theme :

Dependencies

Production Dependencies

• react: ^18.3.1
• react-dom: ^18.3.1
• prop-types: ^15.8.1

Development Dependencies

• vite: ^5.4.8
• sass: ^1.79.4
• copyfiles: ^2.4.1
• @testing-library/react: ^16.0.1
• @vitejs/plugin-react: ^4.3.2
• @vitest/coverage-v8: ^2.1.2
• globals: ^15.11.0
• jsdom: ^25.0.1
• vitest: ^2.1.2
• eslint: ^9.12.0
• eslint-plugin-react: ^7.37.1
• eslint-plugin-react-hooks: ^4.6.2
• eslint-plugin-react-refresh: ^0.4.12

Authors

• Ségolène Ganzin - Initial work and main development (GitHub Profile)