Styled React Modal

 
   

> For support for react <16.9, please use styled-react-modal@1.2.4.

> For support for create-react-app <5.0.0, please import from styled-react-modal/build/umd.

Styled React Modal is built with styled-components. It uses the latest React 17.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.

Demo on CodeSandbox

Install

``
npm i -s styled-react-modal # or use yarn
`

Usage

Add the component near the top of your application's tree.

`js
import React from 'react'
import { ModalProvider } from 'styled-react-modal'
...

export default function App() {
return (





)
}
`

Use the component.

> For instructions on how the make your modal accessible according to the WAI-ARIA spec, see this CodeSandbox.

`js
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};

function FancyModalButton() {
const [isOpen, setIsOpen] = useState(false)

function toggleModal(e) {
setIsOpen(!isOpen)
}

render () {
return (


`

API

#### Top-Level Exports
-
- Modal \(Default\)
- Modal.styled(styles)
-
-

$3

Sets the root portal where 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:

`js
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 function App() {
return (





)
}
`

$3

Factory method that accepts a tagged template literal and returns a component with styles included.

Arguments

- styles \(Tagged Template Literal\): styled-components compatible css styles.

Example:

`js
const StyledModal = Modal.styled
width: 20rem;
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: ${props => props.theme.colors.white};

`

$3

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 the backgroundComponent 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:

`js
import Modal from 'styled-react-modal'

function FancyModalButton() {
const [isOpen, setIsOpen] = useState(false)

function toggleModal(e) {
setIsOpen(!isOpen)
}

render () {
return (


`

$3

A convenience base component for making default background styles with .

Example:

`js
const SpecialModalBackground = styled(BaseModalBackground)
background-color: green;

``