react-dev-modal

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

Installation

npm install react-dev-modal

Options

A list of available properties can be found below. These can be passed to Modal component

Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- isOpen|bool|yes|false|To open the Modal width|string|no|600px|It gives custom width of Modal height|string|no|auto|It gives custom height of Modal positions|string|no|top|It gives position of Modal like top, center, bottom customStyle|object|no||It gives custom style of Modal handleClose|func|yes||The callback to close the Modal

Example

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