https://github.com/akmamun/react-modal-overlay

Accessible simple modal component package for React JS
https://github.com/akmamun/react-modal-overlay

custom-modal modal overlay react react-modal react-modal-component react-modal-popup react-overlay

Last synced: 3 months ago
JSON representation

Accessible simple modal component package for React JS

• Host: GitHub
• URL: https://github.com/akmamun/react-modal-overlay
• Owner: akmamun
• License: mit
• Created: 2020-06-04T06:48:51.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T05:11:58.000Z (8 months ago)
• Last Synced: 2024-10-02T09:13:38.446Z (3 months ago)
• Topics: custom-modal, modal, overlay, react, react-modal, react-modal-component, react-modal-popup, react-overlay
• Language: JavaScript
• Homepage: https://codesandbox.io/s/react-modal-overlay-wybon
• Size: 4.44 MB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-modal-overlay

Accessible simple modal overlay component for React JS

[![NPM](https://img.shields.io/npm/v/react-modal-overlay.svg)](https://www.npmjs.com/package/react-modal-overlay) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.org/akmamun/react-modal-overlay.svg?branch=master)](https://travis-ci.org/akmamun/react-modal-overlay)

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [Demos](#demos)

## Installation

To install, you can use [npm](https://npmjs.com/) or [yarn](https://yarnpkg.com):

```bash

npm install react-modal-overlay

yarn add react-modal-overlay

```

## Usage

- Using Hooks

```jsx

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 (

    


       setIsOpen(true)}>Click Modal!

       setIsOpen(false)}>

        
 here is hook modal data 

      

    

  )

}

```


- Class Based Component

```jsx

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 (

      


        Click Modal!

        

          
 here is modal data 

        

      

    )

  }

}

```


## Demos

- [Hooks example](https://codesandbox.io/s/react-modal-overlay-wybon?file=/src/Hooks.js)

- [Class based Component example](https://codesandbox.io/s/react-modal-overlay-wybon)

## License

MIT © [akmamun](https://github.com/akmamun)