Skip to content
A lightweight dialog component for React
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
jest.config.js
jestSetup.js
package-lock.json
package.json
webpack.config.js
yarn.lock

README.md

A lightweight dialog component for React

Demo

https://codesandbox.io/s/react-modal-example-3km0w

Install

npm i @netojose/react-modal

or

yarn add @netojose/react-modal

Basic usage

import React, { useState, useCallback } from 'react'
import Modal from '@netojose/react-modal'

function App() {
    const [isOpen, setIsOpen] = useState(false)
    const openModal = useCallback(() => setIsOpen(true), [])
    const closeModal = useCallback(() => setIsOpen(false), [])
    return (
        <div>
            <input type="button" value="Open modal" onClick={openModal} />
            <Modal isOpen={isOpen} onRequestClose={closeModal}>
                <p>This is the modal content</p>
                <input type="button" value="Close modal" onClick={closeModal} />
            </Modal>
        </div>
    )
}

export default App

API

prop Description type default value required
isOpen Flag to render or not the modal boolean false Yes
ariaLabelledby aria-labelledby modal attribute string null No
ariaDescribedby aria-describedby modal attribute string null No
onAfterOpen Callback after modal open function () => null No
onAfterClose Callback after modal close function () => null No
onRequestClose Callback when a close modal action is triggered function () => null No
closeOnOverlayClick Flag to request close modal on overlay click boolean true No
closeOnEsc Flag to request close modal on press esc key boolean true No
focusAfterRender Flag to modal should be focused after render boolean true No
portalClassName Portal div class name string ReactModal__Portal No
overlayClassName Overlay div class name string ReactModal__Overlay No
modalClassName Modal div class name string ReactModal__Modal No
overlayStyles Extra overlay styles object {} No
modalStyles Extra modal styles object {} No
container Query selector to append portal string body No
You can’t perform that action at this time.