@pockets-ui/utils

Framework utilities shared across Pockets UI.

createPocket

Wraps React context boilerplate for compound-component state. Give it a display name and a setup function; get back a [Provider, hook] tuple. setup receives the Provider's props and runs during the Provider's render, so it may call hooks — it is a custom hook. The returned hook throws a descriptive error when called outside the Provider.

import { createPocket } from "@pockets-ui/utils"

const [CounterProvider, useCounter] = createPocket(
  "Counter",
  ({ initialCount = 0 }: { initialCount?: number }) => {
    const [count, setCount] = React.useState(initialCount)
    return { count, setCount }
  },
)

react is a peer dependency; there are no other dependencies.