Cerberus Design System

Basic Usage

1
import {
2
  Modal,
3
  Button,
4
  trapFocus,
5
  useModal
6
} from '@cerberus/react'
7

8
function SomePage() {
9
 const { modalRef, show, close } = useModal()
10
 const handleKeyDown = trapFocus(modalRef)
11

12
  return (
13
    <div>
14
      <Button onClick={show}>Show Modal</Button>
15

16
      <Modal onKeyDown={handleKeyDown} ref={modalRef}>
17
        This is a custom modal!
18
        <Button onClick={close}>
19
          Close
20
        </Button>
21
      </Modal>
22
    </div>
23
  )
24
}

Advanced Usage

When you need to dynamically load a Modal, you can use the useModal hook to manage the Modal's state.

This example demonstrates prefetching data before displaying the Modal. After the data is fetched (and cached), the Modal is displayed. Once the Modal is closed, the data is still available for future use.

API

interface UseModalReturnValue {
  modalRef: RefObject<HTMLDialogElement>
  show: () => void
  close: () => void
  isOpen: boolean
}

define function useModal(): UseModalReturnValue

Arguments

The useModal hook does not take any arguments.

Return Value

The useModal hook returns an object with the following properties:

Name	Default	Description
modalRef		The ref that attaches to the Modal component.
show		Triggers the Modal to open.
close		Closes the Modal.
isOpen	`false`	Helper value to know the state of the dialog.