react-modal-construction-kit
v1.0.1 react modal modal-construction-kit react-modal redux-modal component
React Modal Construction Kit
A highly extensible Modal library.
Demo
mikevercoelen.github.io/react-modal-construction-kit
Installation
npm install react-modal-construction-kit --save
Example
import React, { Component } from 'react'
import { Modal, Overlay } from 'react-modal-construction-kit'
export default class App extends Component {
state = {
isModalVisible: false
}
onBtnOpenModalClick = () => {
this.setState({
isModalVisible: true
})
}
close = () => {
this.setState({ isModalVisible: false })
}
render () {
const { isModalVisible } = this.state
return (
<div>
<Modal
onClickOutside={this.close}
onClosed={this.close}
isOpen={isModalVisible}>
<p>
A super minimal Modal
</p>
</Modal>
<Overlay
isVisible={isModalVisible} />
<button
onClick={this.onBtnOpenModalClick}>
Open modal
</button>
</div>
)
}
}
Modal
The modal component is a fully customizable modal, requires no styling and is already animated out of the box.
Property | Type | Default | Description |
---|---|---|---|
isOpen |
boolean | false | Open or close modal's state |
autoFocus |
boolean | - | autofocus the component on mount |
zIndex |
number | 750 | z-index value |
role |
string | "dialog" |
HTML5 role |
children |
React Node | - | The content of the modal |
onOpened |
function | - | Called on when the Transitions triggers 'onOpened' |
onClosed |
function | - | Called on when the Transitions triggers 'onClosed' |
onEnter |
function | - | Called on componentDidMount |
onExit |
function | - | Called on componentWillUnmount |
onEntered |
function(node, isAppearing) | - | - |
onExited |
function(node) | - | - |
className |
string | - | Adds a class names to component root |
dialogClassName |
string | - | Adds a class name to dialog |
contentClassName |
string | - | Adds a class name to content |
hasEscapeClose |
boolean | true | If enabled, escape keydown will trigger onClosed |
hasOutsideClickClose |
boolean | true | If enabled, clicking outside of the modal (i.e. on the overlay) will trigger onClosed |
transitionDuration |
number | 300 | Duration of the animation |
Overlay
The Modal component does not have an overlay by default, the reason for this is: what if you have multiple modals open? You should only have ONE overlay. It's animated and also requires no styling, it just works ;)
import { Overlay } from 'react-modal-construction-kit'
Property | Type | Default | Description |
---|---|---|---|
isVisible |
boolean | false | Shows or hides the overlay |
zIndex |
number | 500 | z-index value |
className |
string | - | A className applied to the overlay |
opacity |
number | 0.7 | The opacity value when the overlay is fully visible |
transitionDuration |
number | 150 | The duration of the transition |
onClick |
function(event) | - | onClick handler, when using a modal you don't need this, use Modal.onClickOutside |
License
MIT Licensed. Copyright (c) Mike Vercoelen 2018.
npm i [email protected]
Metadata
- MIT
- Whatever
- Mike Vercoelen
- released 4/4/2018