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