Overlay Management Hook (hooks/use-overlay.tsx)

chakra-ui · ui, UI / Frontend, hook, overlay, state, react

React hook that creates overlay components with open state handling, callbacks, and optional return values.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
import * as React from "react"
import { type Dict, omit } from "../utils"

type OverlaySnapshotEntry<T extends Dict> = { id: string; props: T }

const shallowEqualEntries = <T extends Dict>(
  a: OverlaySnapshotEntry<T>[],
  b: OverlaySnapshotEntry<T>[],
) => {
  if (a.length !== b.length) return false
  for (let i = 0; i < a.length; i++) {
    const aEntry = a[i]
    const bEntry = b[i]
    if (!aEntry || !bEntry) return false
    if (aEntry.id !== bEntry.id) return false
    const aKeys = Object.keys(aEntry.props)
    const bKeys = Object.keys(bEntry.props)
    if (aKeys.length !== bKeys.length) return false
    for (cons

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key