Skip to content

Latest commit

 

History

History
285 lines (219 loc) · 9.33 KB

README.md

File metadata and controls

285 lines (219 loc) · 9.33 KB
Raw

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
Prop Required Description
id yes this will give the DOMnode that is created to hold the modal content an id if there already is a DOMnode with that id it will reuse that for the new modal
children yes This is the content of the portal, usually the entire modal, including the overlay

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
Prop Required Description
id yes this will give the DOMnode that is created to hold the modal content an id if there already is a DOMnode with that id it will reuse that for the new modal
isOpen yes this will be used to create the portal for the modal and mount the modal
role no for a11y purposes we can set the role for our modal, it defaults to dialog
ariaHideApp no sets a aria hide on the div with id of 'root'
shouldFocusAfterRender no defaults to true and sets the focus on the modal div
onOverlayClick no lets you pass in a function that is triggered when clicking on the overlay, you might want to pass a function that sets the isOpen prop to false IE closing the modal
shouldReturnFocusAfterClose no defaults to true, will return focus to last focus element before the modal was opened
onEscape no lets you pass a function to that is triggered if you press the ESC key while the modal is active, often you want to close the modal
children yes the content of the modal

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>;
option required description
focusOnRender no defaults to true, will focus the modal container
returnFocus no defaults to true, will return focus to last focused element when the component that uses this hook unmounts

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'
argument required description
id yes add the aria-hide attribute to the element with the id

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);
});
argument required description
callback yes gets called with every keypress

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");
});
argument required description
callback yes gets called when escape is 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