react-modal-package-openclassrooms-p14
v1.0.8
Published
A simple modal component library
Downloads
5
Readme
SimpleReactModal
A simple and customizable React modal component.
Installation
Install the package using npm:
npm i react-modal-package-openclassrooms-p14
Install also react icons
npm install react-icons --save
Initialization
Import the SimpleReactModal component and the useModalShow hook into your React component:
import { SimpleReactModal, useModalShow } from "react-modal-package-openclassrooms-p14";
In case something is missing, add the following import :
import React, { useState, useEffect, useRef } from "react";
Usage
useModalShow Hook The useModalShow hook provides a simple way to manage the modal state. It returns an array with the modal state, open and close functions:
const timeOut = 2500;
const [isOpen, setIsOpen, openModal, closeModal] = useModalShow(timeOut);
const content = 'Employee Created!';
timeOut: set the auto close timer (in ms) for the modal, if set to 0, the modal will not close automatically
content: set the modal content
isOpen: A boolean indicating whether the modal is open or closed.
setIsOpen: Function to set the modal state.
openModal: Function to open the modal.
closeModal: Function to close the modal.
optional :
- title: set the modal title
SimpleReactModal Component
Use the SimpleReactModal component to display a modal.
Include it in your component and pass the necessary props, example :
<SimpleReactModal
title="Modal Title"
content="Modal Content"
type="success"
timeOut={5000}
debugMode={false}
isOpen={isOpen}
/>
- title (optional): The title of the modal.
- content: The content of the modal.
- type: A string specifying the type of the modal (e.g., "default", "success", "error"), 'success' = green styling - 'error' = red styling.
- timeOut (optional): Auto-close the modal after a specified time (in milliseconds). If not specified will disapear only if user click on close symbol or click away from modal
- debugMode (optional): Show a 'Show' button in debug mode to test the modal.
- isOpen: The modal state is mandatory to allow the isOpen state conservation
Optional :
- style: you can add styling options props directly
You can also style the modal using the already defined className :
:root: Modal Effect: Defines color variables used in other styles. :root { --white: #ffffff; --black: #000000; --lowBlack: rgba(0, 0, 0, 0.678); --success: #51be56; --warning: #ffc107; --error: #ff3122; --primary: #29b6f6; }
.modalContainer: Modal Effect: Positions the modal in the center of the window.
.modalDialogWrapper: Modal Effect: Sets the background color of the modal.
.modalDialog Modal Effect: Main style of the modal, centers it in the window, defines text color, shadow, border, etc. Adds a fade-in animation.
.modalDialog.success: Modal Effect: Adds a specific style in case of success.
.modalDialog.error: Modal Effect: Adds a specific style in case of an error.
.modalDialog.warning: Modal Effect: Adds a specific style in case of a warning.
.modalDialog--Title: Modal Effect: Style for the modal title.
.modalDialog--Content: Modal Effect: Style for the modal content.
.modalDialog--CloseBtnContainer: Modal Effect: Container for the close button.
.modalDialog--CloseBtn: Modal Effect: Style for the close button.
.modalDialog--CloseBtn:hover: Modal Effect: Style for the close button on hover.