For support for styled-components v3, please use [email protected].
Styled React Modal is built with styled-components. It uses the latest React 16.x features and exposes a familiar, easy to use API. It supports beforeOpen()
, afterOpen()
, and other lifecycle hooks so that animations can be handled easily. Unlike several other modal implementations in React, it does not pollute the DOM with excessive nodes.
npm i -s styled-react-modal
Add the <ModalProvider>
component near the top of your application's tree.
import React, { Component } from 'react'
import { ModalProvider } from 'styled-react-modal'
...
export default class App extends Component {
render () {
return (
<ThemeProvider theme={theme}>
<ModalProvider>
<FancyModalButton />
</ModalProvider>
</ThemeProvider>
)
}
}
Use the <Modal>
component.
import Modal from 'styled-react-modal'
...
const StyledModal = Modal.styled`
width: 20rem;
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: ${props => props.theme.colors.white};
`
class FancyModalButton extends Component {
constructor (props) {
super(props)
this.state = {
isOpen: false,
}
this.toggleModal = this.toggleModal.bind(this)
}
toggleModal (e) {
this.setState((prevState) => ({ isOpen: !prevState.isOpen }))
}
render () {
return (
<div>
<button onClick={this.toggleModal}>Click me</button>
<StyledModal
isOpen={this.state.isOpen}
onBackgroundClick={this.toggleModal}
onEscapeKeydown={this.toggleModal}>
<span>I am a modal!</span>
<button onClick={this.toggleModal}>Close me</button>
</StyledModal>
</div>
)
}
}
<ModalProvider>
Modal
(Default)Modal.styled(styles)
<Modal>
<BaseModalBackground>
Sets the root portal where <Modal>
s will be rendered.
Props
- [
backgroundComponent
] (Component): A styled component to be used as the default modal background. If not provided, library defaults will be used.
Example:
import { ModalProvider } from 'styled-react-modal'
const SpecialModalBackground = styled.div`
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 30;
opacity: ${props => props.opacity};
background-color: green;
`
export default class App extends Component {
render () {
return (
<ThemeProvider theme={theme}>
<ModalProvider backgroundComponent={SpecialModalBackground}>
<FancyModalButton />
</ModalProvider>
</ThemeProvider>
)
}
}
Factory method that accepts a tagged template literal and returns a <Modal>
component with styles included.
Arguments
styles
(Tagged Template Literal): styled-components compatible css styles.
Example:
const StyledModal = Modal.styled`
width: 20rem;
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: ${props => props.theme.colors.white};
`
Renders its children in a modal when open, nothing when not open.
Props
isOpen
(Boolean): A boolean that indicates whether the modal is to be open or closed.- [
onBackgroundClick
] (Function): A function that is called when the modal background is clicked. - [
onEscapeKeydown
] (Function): A function that is called when the escape key is pressed while the modal is open. - [
backgroundProps
] (Object): A props object that is spread over thebackgroundComponent
when included. - [
allowScroll
] (Boolean): When true, scrolling in the document body is not disabled when the modal is open. - [
beforeOpen
] (Function): A function that is called before the modal opens. If this function returns a promise, then the modal is opened after the promise is resolved. - [
afterOpen
] (Function): A function that is called after the modal opens. - [
beforeClose
] (Function): A function that is called before the modal closes. If this function returns a promise, then the modal is closed after the promise is resolved. - [
afterClose
] (Function): A function that is called after the modal closes.
Example:
import Modal from 'styled-react-modal'
class FancyModalButton extends Component {
constructor (props) {
super(props)
this.state = {
isOpen: false,
}
this.toggleModal = this.toggleModal.bind(this)
}
toggleModal (e) {
this.setState((prevState) => ({ isOpen: !prevState.isOpen }))
}
render () {
return (
<div>
<button onClick={this.toggleModal}>Click me</button>
<Modal isOpen={this.state.isOpen}>
<span>I am a modal!</span>
<button onClick={this.toggleModal}>Close me</button>
</Modal>
</div>
)
}
}
A convenience base component for making default background styles with <ModalProvider>
.
Example:
const SpecialModalBackground = styled(BaseModalBackground)`
background-color: green;
`