🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

hook-modal

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hook-modal

React Hooks for building accessible modal

0.1.2
latest
npm
Version published
Maintainers
1
Created
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

react

FAQs

Package last updated on 10 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts