1.1.3 • Published 3 years ago
react-dev-modal v1.1.3
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