Skip to content


Repository files navigation

A lightweight dialog component for React



npm i @netojose/react-modal


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 (
            <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} />

export default App


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