ReactJS Modal
Modal component for ReactJS
Run example
git clone https://github.com/Volosojui/react-flex-modalcd react-flex-modalnpm installnpm startopen http://localhost:9000
Install
npm install react-flex-modal --save
Usage
import React from 'react';import Modal from 'react-flex-modal'; { return <div> <Modal = > Modal content </Modal> </div> ; }
Props
children
Type: node
The contents of the modal window
isOpen
Type: bool
Default: false
If true
, then the modal window is visible, otherwise is hidden.
position
Type: string
Default: fixed
It should be equal to position
property specified in the styles.
modalClass
Type: string
Default: ``
Custom a css-class of the modal
modalDialogClass
Type: string
Default: ``
Custom a css-class of the dialog
transition
Type: bool
Default: false
Use it only if you want to add the opening and closing CSS animations. You should specify the required styles within certain classes. See in the CSS classes.
Enable/Disable timer for the opening and closing CSS transitions. If enabled, you should set transitionEnterTimeout
and transitionLeaveTimeout
.
transitionEnterTimeout
Type: number
Default: 300
ms
The duration of CSS transition when the modal window is opening.
It should be equal to the sum of the greatest duration and the greatest delay specified in transition
property of CSS rule .Modal--enter.Modal--enter-active
. See in the CSS classes.
For example:
/* transition-duration = .3s = 300ms transition-delay = 0s = 0ms transitionLeaveTimeout = 300ms + 0s = 300ms */
transitionLeaveTimeout
Type: number
Default: 300
ms
The duration of CSS transition when the modal window is closing.
It should be equal to the sum of the greatest duration and the greatest delay specified in transition
property of CSS rule .Modal--leave.Modal--leave-active
. See in the CSS classes.
For example:
/* transition-duration = .3s = 300ms transition-delay = .1s = 100ms transitionLeaveTimeout = 300ms + 100ms = 400ms */
onClose
Type: func
Default: undefined
The callback function that will be called when the modal window is closed.
CSS
The package does not include CSS styles, so you can customize the appearance of modal as you wish.
Animation classes
.Modal--enter
Defines the beginning of the modal window opening.
.Modal--enter.Modal--enter-active
Defines the actual opening.
.Modal--leave
Defines the beginning of the modal window closing.
.Modal--leave.Modal--leave-active
Defines the actual closing.