styled-modal-react

Modal components for react

Install

$ npm install styled-modal-react
$ yarn add styled-modal-react

Usage

Step1: Set up provider

import React from 'react'
import { render } from 'react-dom'
import { ModalProvider } from 'styled-modal-react'
import App from './components/App'

const rootElement = document.getElementById('root')

render(
  <ModalProvider root={rootElement}>
    <App />
  </ModalProvider>,
  document.getElementById(rootElement)
)

Step2 Render modal component

import React, { FC, useState } from 'react'
import { Modal } from 'styled-modal-react'

const ModalExample: FC<{}> = () => {
  const [visible, setVisible] = useState(true)

  return (
    <div>
      <button
        onClick={() => {
          setVisible(true)
        }}
      >
        Open Modal
      </button>

      <Modal
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      >
        // Here is modal body
        <div>
          <h2>Modal title</h2>
          <p>
            modal contents
          </p>
        </div>
      </Modal>
    </div>
  )
}

License

MIT © koukikitamura