Description

P14-modal-opc is a versatile and intuitive modal library that can be easily integrated into any React application. Developed as part of Project 14 of the OpenClassroom course, this open-source library provides a seamless way to add modals to your projects and is available for free.

It was created for Projet 14 of OpenClassroom course and it shows how use create and use an library in NPM.

Install

npm install p14-modal-opc

How to use

//This is the modal state, it will define if it's open or closed
const [showModal, setShowModal] = useState(false);

const handleSubmit = (event) => {
    event.preventDefault();
    //This is will change the state of the modal
      setShowModal(true);}
return
//This is the modal in your code, it's necessary use a message as string and integrate correctly with your useState.
<Modal isOpen={showModal} message={'Employee created!'} closeModal={() => setShowModal(false)}/></div>

<form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>