react-dev-modal

This package provides an easy and simple way to use modal in react.

Installation

npm install react-dev-modal

Usage

import React, { useState } from 'react'
import { Modal, ModalTitle, ModalContent, ModalFooter } from 'reatc-dev-modal'

const SampleUsage = () => {

  const [isModalOpen, setIsModalOpen] = useState(false)

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen)
  }

  const style = {
    border: '2px solid #000'
  }

  return (
    <>
      <button onClick={toggleModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        handleClose={toggleModal}
        height='300px'
        width='600px'
        position='top' // top, center, bottom
        customStyle={style} // pass the custom styles
      >
        <ModalTitle handleClose={toggleModal}>
          <TitleText>Title</TitleText>
        </ModalTitle>
        <ModalContent>Content</ModalContent>
        <ModalFooter>Footer</ModalFooter>
      </Modal>
    </>
  )
}

export default SampleUsage

Author

Abishek