react-modal-overlay

Accessible simple modal overlay component for React JS

Table of Contents

• Installation
• Usage
• Demos

Installation

To install, you can use npm or yarn:

npm install react-modal-overlay
yarn add react-modal-overlay

Usage

• Using Hooks

import React, { useState } from 'react'
import { Modal } from 'react-modal-overlay'
import 'react-modal-overlay/dist/index.css'

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Click Modal!</button>
      <Modal show={isOpen} closeModal={() => setIsOpen(false)}>
        <h4> here is hook modal data </h4>
      </Modal>
    </div>
  )
}

• Class Based Component

import React, { Component } from 'react'
import { Modal } from 'react-modal-overlay'
import 'react-modal-overlay/dist/index.css'

export default class ExampleModal extends Component {
  state = {
    showModal: false
  }

  toggleModal = () => {
    this.setState({
      showModal: !this.state.showModal
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Click Modal!</button>
        <Modal show={this.state.showModal} closeModal={this.toggleModal}>
          <h4> here is modal data </h4>
        </Modal>
      </div>
    )
  }
}

Demos

• Hooks example

• Class based Component example

License

MIT © akmamun