React Modal Library

A simple modal component for React application.

NPM publication

You can see npm publication here

Installation

You can install react_modal_liba with npm command : npm install react_modal_liba or with yarn command : yarn add react_modal_liba

Use react_modal_library

1. Import Modal component to your file : import { Modal } from 'react_modal_liba'

2. Insert Modal component at rendering (example) :

import { Modal } from 'react_modal_liba';

const Form = () => {

  const [ isOpen, setIsOpen ] = useState(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    openModal();
   };

  return (
    <div className='Form'>
      <form method='post'>
        <div>
          <label htmlFor='firstName'>First Name</label>
          <input aria-required="true" type='text' id='firstName' name='firstName' onChange={(e) => setFirstname(e.target.value)} required value={firstname} />
        </div>
      </form>
      <button type='submit' id='saveButton' onClick={(e) => handleSubmit(e)}>Save</button>
      {isOpen && <Modal text='Employee created' close={closeModal} />}
    </div>
  );
}

export default Form;

3. Pass props text and close to Modal component.

Props expected

• text contains text to display in Modal component
• close contains function that returns false

Demo