Amandine_carreno_p14_modal_lib NPM

Modal_Plugin

Cursus OpenClassrooms: Project 14

This plugin is a part of the project 14 HrNet. You will me able to create easily a customizable Modal component.

Installation

 npm i amandine_carreno_p14_modal_lib

Usage

This is an example for a simple usage of the Modal component. To show the Modal you have do use the propertie "isOpen" and set it to true and to remove the Modal you have to pass a callback to set "isOpen" at false. You can Embeded the node element of your choice as modal's content.

// import Component
import { Modal } from "amandine_carreno_p14_modal_lib"
// import style
import "amandine_carreno_p14_modal_lib/dist/index.css"

function App() {
    // constent that handles the state of the modal
    const [open, setOpen] = useState(false)
 return (
        <> 
            <button onClick={() => setOpen(true)}>Open</button>
            
            <Modal isOpen={open} 
            handleClose={() => setOpen(false)}
            customButtonShow={false}>            
            <p>Your Message</p>
            </Modal>
        </>
    )
}

Properties

Name	Type	Default.	Description
isOpen	bool	true	Display of the modal
defaultButtonShow	bool	true	Display default button which only supports function to close the modal
customButtonShow	bool	true	display customizable button
handleClose	func	--	Function that handles closing events on under layer, cross icon and default closing button
handleCustomClick	func	--	Function that handles event on custom button can be used as submit, cancel, etc..
children	node	--	Modal main content
title	string	--	Modal Modal header text content
defaultButtonLabel	string	"Close"	default button text label
customButtonLabel	string	"OK"	custom button text label
size	"L", "M", "S"	--	Apply class to change dialog window's width
underlayerColor	string	"rgba(83, 157, 131, 0.6)"	Modal uderlayer color
underlayerWidth	string	"100%"	Width of under layer
underlayerHeight	string	"100%"	Height of under layer
dialogBackgroundColor	string	"#FFFF"	Modal dialog color
iconColor	string	"rgba(83, 157, 131, 0.6)"	Modal cross icon color
customButtonBackgroundColor	string	--	Customizable button background color
customButtonColor	string	--	Customizable button text color
customButtonMargin	string	--	Customizable button margin
customButtonType	string	"button"	Customizable button type if "submit" propertie formId is needed
formId	string	--	Required to link form in modal content and customizable button