1.0.4 • Published 5 years ago

@netojose/react-modal v1.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

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

propDescriptiontypedefault valuerequired
isOpenFlag to render or not the modalbooleanfalseYes
ariaLabelledbyaria-labelledby modal attributestringnullNo
ariaDescribedbyaria-describedby modal attributestringnullNo
onAfterOpenCallback after modal openfunction() => nullNo
onAfterCloseCallback after modal closefunction() => nullNo
onRequestCloseCallback when a close modal action is triggeredfunction() => nullNo
closeOnOverlayClickFlag to request close modal on overlay clickbooleantrueNo
closeOnEscFlag to request close modal on press esc keybooleantrueNo
focusAfterRenderFlag to modal should be focused after renderbooleantrueNo
portalClassNamePortal div class namestringReactModal__PortalNo
overlayClassNameOverlay div class namestringReactModal__OverlayNo
modalClassNameModal div class namestringReactModal__ModalNo
overlayStylesExtra overlay stylesobject{}No
modalStylesExtra modal stylesobject{}No
containerQuery selector to append portalstringbodyNo