Safe React Context

createSafeContext creates a React context together with a hook that fails loudly when called outside its provider.

It is useful for compound components such as dialogs, selects, and field systems where child components should never silently receive a missing context.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/create-safe-context.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import * as React from 'react'export function createSafeContext<TValue>(  errorMessage = 'useContext must be used within a Provider') {  const Context = React.createContext<TValue | null>(null)  function useSafeContext() {    const context = React.use(Context)    if (context === null) throw new Error(errorMessage)    return context  }  return [useSafeContext, Context] as const}

UsageCopy Anchor Link

import { createSafeContext } from '@/lib/create-safe-context'

const [useMenuContext, MenuContext] = createSafeContext<{
  close: () => void
}>()

function MenuButton() {
  const { close } = useMenuContext()

  return <button onClick={close}>Close</button>
}

A provider can supply the context with the returned Context object:

<MenuContext value={{ close }}>
  <MenuButton />
</MenuContext>

Calling useMenuContext outside of the provider throws useContext must be used within a Provider by default.

Custom error messageCopy Anchor Link

const [useAuthContext, AuthContext] = createSafeContext<AuthValue>(
  'useAuthContext must be used within AuthProvider'
)

API ReferenceCopy Anchor Link

createSafeContextCopy Anchor Link

function createSafeContext<TValue>(
  errorMessage?: string
): readonly [
  useSafeContext: () => TValue,
  Context: React.Context<TValue | null>
]

The hook only succeeds when the context value is non-null.