@dev-nat/context-pass

A minimal React helper for passing a single value down the component tree without creating a new context object for every use case.

Why?

React Context is the idiomatic way to share data between components without prop drilling, but it requires you to createContext for each piece of state you want to share. context-pass gives you one generic provider and one hook, so you can skip the ceremony.

Install

npm install @dev-nat/context-pass
# or
bun add @dev-nat/context-pass

Requires react and react-dom v19+ as peer dependencies.

Usage

import { ContextPassProvider, useContextPass } from '@dev-nat/context-pass'

function App() {
  return (
    <ContextPassProvider values={{ theme: 'dark', locale: 'en' }}>
      <Toolbar />
    </ContextPassProvider>
  )
}

function Toolbar() {
  const { theme, locale } = useContextPass<{ theme: string; locale: string }>()
  return (
    <div className={theme}>
      {locale === 'en' ? 'Hello' : 'Hola'}
    </div>
  )
}

API

ContextPassProvider<T>

Wraps children in a React context provider. Accepts a single values prop of any type.

useContextPass<T>()

Reads the value provided by the nearest ContextPassProvider. Throws an error if used outside of a provider.

const value = useContextPass<YourType>()

Development

bun install        # install dependencies
bun run build      # build dist output (ESM + CJS + types)
bun run lint       # biome check --write
bun run prepublishOnly # lint + typecheck + build