react-customizable-modal

A fully customizable and accessable react modal with hook primitives.

Motivation

There are several modal implementations in react, but none of them offered the flexibility to have total control of the components being rendered so that you could use whichever animation library you want.

Features

• Easy out of the box Modal component.
• Exposes the underlying hooks to make it possible to compose them as you see fit.

Demos

Default builtin Modal
Animated modal with react-spring
Swipe up from below

Code Examples

Basic Modal

import { Modal } from "@weahead/react-customizable-modal";
function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open modal
      </button>
      <Modal
        isOpen={isOpen}
        onEscape={() => {
          setIsOpen(false);
        }}
        onOverlayClick={() => {
          setIsOpen(false);
        }}
      >
        <button
          onClick={() => {
            setIsOpen(false);
          }}
        >
          Close
        </button>
      </Modal>
    </div>
  );
}

Custom Modal with custom overlay

CustomModal.jsx

import React from "react";
import {
  useTrapFocus,
  useBodyScrollLock,
  useCloseOnEsc,
  ModalPortal
} from "react-customizable-modal";
function Overlay({ children }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }}
    >
      {children}
    </div>
  );
}
export default function CustomModal({ isOpen, onClose, children }) {
  useBodyScrollLock();
  useCloseOnEsc(onClose);
  const modalRef = useTrapFocus();
  return (
    isOpen && (
      <ModalPortal id={`customModal`}>
        <Overlay>
          <div
            ref={modalRef}
            style={{
              width: 500,
              height: 400,
              backgroundColor: "#fff",
              padding: 20,
              position: "absolute"
            }}
          >
            <button onClick={onClose}>Close modal</button>
            {children}
          </div>
        </Overlay>
      </ModalPortal>
    )
  );
}

App.jsx

import CustomModal from "CustomModal.jsx";
function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open modal
      </button>
      <CustomModal
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      >
        This is a custom modal
      </CustomModal>
    </div>
  );
}

Installation

npm i @weahead/react-customizable-modal
OR
yarn add @weahead/react-customizable-modal

API Reference

Components

ModalPortal

a simple wrapper around React.createPortal function, but it also removes the div from the DOM on unmount

Props

Modal

A basic Modal component ready for use, if you dont want to implement your own. it uses only the hooks and components from this package

Props

Hooks

useTrapFocus

import {useTrapFocus} from '@weahead/react-customizable-modal'

used to trap focus inside of the modal component

const modalRef = useTrapFocus(options);
// returns a ref that needs to be given to the element that you want to trap focus within
<div ref={modalRef}>focus will be trapped in this div</div>;

useAriaHide

import {useAriaHide} from '@weahead/react-customizable-modal'

sets the aria-hidden attribute on the element with the id passed in and removes it when the component that uses this hook is unmounted

useAriaHide(id); //often `id` would be 'root'

useBodyScrollLock

import {useBodyScrollLock} from '@weahead/react-customizable-modal'

this is taken from usehooks all credit goes to them.
it locks the body from scrolling while the component that uses this hook is rendered.

useBodyScrollLock();

useHandleKeyPress

import {useHandleKeyPress} from '@weahead/react-customizable-modal'

this hook is used by the useCloseOnEsc hook and other internal components
it lets you provide a function that is executed on every keypress while the component that uses this hook is mounted

useHandleKeyPress(e => {
  console.log(e.keyCode);
});

useCloseOnEsc

import {useCloseOnEsc} from '@weahead/react-customizable-modal'

this hook is used by the useHandleKeyPress hook but only triggers the callback if the escape key is pressed

useCloseOnEsc(() => {
  console.log("ESC key was pressed");
});

https://github.com/reactjs/react-modal
https://github.com/davidtheclark/tabbable/blob/master/index.js
https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions