Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

hook-modal

Package Overview
Dependencies
3
Maintainers
1
Versions
3
Issues
File Explorer

Advanced tools

hook-modal

React Hooks for building accessible modal

    0.1.2latest
    npm

Version published
Maintainers
1
Weekly downloads
1,044
increased by27.47%

Weekly downloads

Readme

Source

hook-modal

CI npm version

React Hook for making modal accessible.

Installation

Using yarn:

$ yarn add hook-modal

Using npm:

$ npm install hook-modal

Usage

import { createPortal } from "react-dom"; import { useModal } from "hook-modal"; import classes from "./Modal.module.css"; const Modal = ({ isOpen, onClose, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, children, }) => { const props = useModal({ isOpen, onClose }); if (!isOpen) { return null; } return createPortal( <div className={classes.overlay}> <div {...props} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} className={classes.content} > {children} </div> </div>, document.body, ); };

Options

nametyperequireddescriptiondefault
isOpenbooleanrequiredSet to true if the modal is open-
onClose() => voidrequiredCallback function to close the modal-
closeOnEscbooleanoptionalIf true, close the modal on Esc key pressedtrue
closeOnOutsideClickbooleanoptionalIf true, close the modal on outside clickedtrue

Accessibility

  • Set role="dialog" and aria-modal="true" attributes to modal element
  • When modal is opened, focus the first focusable element in the modal
  • While modal is open, non-modal elements are marked with aria-hidden="true"
  • While modal is open, scrolling of non-modal elements is disabled
  • While modal is open, focus is trapped in modal
  • Pressing the Esc key closes the modal
  • Clicking outside the modal closes the modal
  • Closing the modal returns focus to the element that was in focus before the modal was opened

License

MIT

Keywords

FAQs

Last updated on 10 Nov 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc