simple-modal-libraryA library of React components created using create-react-app.

1/ InstallationRun the following command:

npm install simple-modal-library

2/ Import the component from the library :

import { Modal } from 'simple-modal-library' import React from 'react' import styles from "./style.module.css"

3/ Place this state hook (concerning the opening/closing of the modal) at the start of the function that uses the Modal component :

cconst [showModal, setShowModal] = useState(false)

4/ In the return of the function, call the Modal component :

{showModal && (<Modal className={styles["box-modal"]} message="Employee Created!" onClose={closeModal} /> )}

5/ Example :

import React, { useState } from 'react'
import { Modal } from '../components/Modal'

export default function Home() {
  const [isOpen, setIsOpen] = useState(false)
  const name = 'John Smith'

  return (
    <>
      <h1>Modal Test</h1>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {showModal && (
        <Modal className={styles["box-modal"]} message="Employee Created!" onClose={closeModal} />
      )}
    </>
  )
}

Prerequisites

Dependencies

DevDependencies