react-modal-simple-customizable

react-modal-simple-customizable

It is simple React modal dialog which can be fully and easily customized

Live Demo

Installation:

npm install react-modal-simple-customizable

or

yarn add react-modal-simple-customizable

or

pnpm add react-modal-simple-customizable

Usage :

Add Modal to your component:

import React, { useState } from 'react'
import { Modal } from 'react-modal-simple-customizable'

const App = () => {
  const [showModal, setShowModal] = useState(false)

  const onCloseHandler = () => setShowModal(false)

  return (
    <div className='App'>
      <button type='button' onClick={() => setShowModal(true)}>
        Show Modal
      </button>
      <Modal onClose={onCloseHandler} show={showModal}>
        <h1>Modal title</h1>
        <p>modal paragraph</p>
        <button type='button' onClick={onCloseHandler}>
          Close
        </button>
      </Modal>
    </div>
  )
}