0.2.3 • Published 11 months ago

jy-oc-p14-ma-bibliotheque-de-composants v0.2.3

Weekly downloads
-
License
-
Repository
github
Last release
11 months ago

Modal Component for React Applications : jy-oc-p14-ma-bibliotheque-de-composants

Description

This Modal component is designed for React applications, offering a flexible and easy-to-use solution for displaying modals. With customizable content, styles, and behaviors, this modal component can adapt to a wide variety of use cases.

Author

Julien YASSEF

Link to NPM

Modal Package

Features

  • Dynamic Visibility: Control the display of the modal with an isOpen prop.
  • Customizable Styling: Override default styles for the modal, title, content, and close icon through CSS classes.
  • Close Mechanisms: Supports closing the modal through a close icon, pressing the ESC key, clicking outside the modal, or a custom close text link.
  • Accessibility Features: Implements focus management and supports disabling background content scrolling when the modal is open.
  • Animation Controls: Customize fade-in and fade-out animations for both the overlay and the modal content with duration and delay options.

Prerequies

Node version LTS IDE VSCODE

Installation

To incorporate jy-oc-p14-ma-bibliotheque-de-composants into your project, run the following npm command:

bash npm install jy-oc-p14-ma-bibliotheque-de-composants

Include the Modal.css file in your project to get started with the default styling. You can import it in your main application file like so: import 'jy-oc-p14-ma-bibliotheque-de-composants/src/libModal.css';

Props of the modal

PropTypeDescriptionDefault
isOpenbooleanControls the visibility of the modal.Required
titlestringThe title displayed at the top of the modal.None
contentJSX.Element/stringThe content of the modal, can be text, JSX, or any React component.Required
handleCloseFunctionFunction to call when the modal needs to be closed.Required
modalClassstringCSS class for the modal."modal"
titleClassstringCSS class for the modal title."modalTitle"
contentClassstringCSS class for the modal content."modalContent"
closeIconJSX.ElementCustom JSX for the close icon.Default SVG icon
enableCloseIconClickbooleanIf false, clicking the close icon will not close the modal.true
escapeClosebooleanAllows the modal to be closed by pressing the escape key.false
closeOnClickOutsidebooleanAllows the modal to be closed by clicking outside its content area.false
disableScrollbooleanDisables scrolling of the background content when the modal is open.false
centeredModalbooleanCenters the modal in the window.false
fadeDurationOverlaynumberFade effect duration for the overlay in milliseconds.0
fadeDelayOverlaynumberDelay before the fade effect for the overlay starts, in milliseconds.0
fadeDurationModalnumberFade effect duration for the modal itself in milliseconds.0
fadeDelayModalnumberDelay before the fade effect for the modal content starts, in milliseconds.0
closePreviousOnOpenbooleanAutomatically closes previous modals when a new modal is opened.false
closeLinkstringOptional text for a close link.None
linkCloseClassstringCSS class for the close link."linkClose"
closeClassstringCSS class for the close button.'customClose'
0.2.1

11 months ago

0.2.3

11 months ago

0.2.2

11 months ago

0.1.2

1 year ago

0.2.0

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago