sg-modal-lib

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)