mam_modale v1.0.3

Features

Display a modal window linked to a user action

Technologies

• HTML 5 & CSS 3
• Javascript (jsx) & REACT 18.2.0

Test

In a terminal :

git clone https://github.com/ValentinMam/MamModale.git 

npm install

npm run dev

A local window opens with the project (App.jsx)

Edit src/App.jsx and save to test

Installation

In a terminal :

npm i mam_modale

or

yarn add mam_modale

Use

In the component function calling the modal window :

Import the 'Modal' component :

import Modal from "mam_modale"

In the function, initialize the state for the modal window state (Open / No):

const [isOpen, setIsOpen] = useState(false)

In the return block, insert the following line:

{
  isOpen && <Modal setIsOpen={setIsOpen} />
}

In the trigger element props as an "Open Modal" button :

<button onClick={() => setIsOpen(true)}>Open Modal</button>

Les props

The modal window is composed of a default CSS, but the following parameters can be modified:

For a modal with the text "Employee successfully added.", a button and blue text #1976d2, a height of 200px, a width of 30%... we'd write :

{
  isOpen && (
    <Modal
          setIsOpen={setIsOpen}
          text="Employee successfully added."
          buttonColor="#1976d2"
          textColor="#1976d2"
          textSize="1.5em"
          modalWidth="30%"
          modalHeight="200px"
          modalBG="rgb(255,0,0,0,0.8)"
    />
  )
}

If one of the above parameters is not mentioned, the default value will be applied.