Constate

Lift local React state into scoped Context using a single factory around your own hooks

Library
npm
v4.0.0
4,004stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
81/100Excellent
Development Activity100
Maintenance72
Community52
Maturity60
Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
79/100Good
Architecture72
Code Quality78
Innovation80
Learning Curve85

Constate is a small utility that wraps any custom React hook and turns it into a Context provider plus matching consumer hooks, so state you already wrote as a hook can be shared across a component tree without hand-rolling a Context each time. It stays close to plain React: there is no store, no reducer convention, and no extra dependency beyond React itself, which makes it a lightweight middle ground between local useState/useReducer hooks and a full state-management library.

What You Get

  • A constate(useValue, ...selectors) factory that wraps any custom hook and returns [Provider, ...hooks]
  • Automatic prop forwarding from the generated Provider into the wrapped hook, so hook parameters become component props
  • Optional selector functions that split a hook’s return value into separate Contexts to avoid unnecessary re-renders
  • A development-mode warning when a consumer hook is used outside of its matching Provider
  • Full TypeScript types that infer Provider props and hook return types from the wrapped hook’s signature

Common Use Cases

  • Sharing a counter, toggle, or form-field hook across a handful of sibling components without prop drilling
  • Promoting an existing custom hook (e.g. useAuth, useCart) to app-wide or feature-wide Context with a one-line change
  • Splitting frequently-changing values (like an incrementing counter) from stable callbacks (like the increment function) into separate Contexts so consumers only re-render on the piece they read
  • Building small, scoped state containers for a single feature or route without introducing Redux, Zustand, or another external store

Under The Hood

Architecture Constate is a single-file library (packages/constate/src/index.tsx) built around one factory function: it creates one React Context per selector (or one Context for the whole hook value when no selectors are given), wraps children in nested Context.Provider elements inside a generated Provider component, and returns matching consumer hooks that read from those Contexts and warn in development if used outside a Provider.

Tech Stack The package is pure TypeScript with React as its only peer dependency (^16.8.0 through ^19.x), built with rolldown into dist/ as ESM with bundled type declarations; the surrounding monorepo uses pnpm workspaces, vitest for tests, oxlint/oxfmt for linting and formatting, and changesets for releases.

Code Quality The implementation is fully typed with generics that infer Provider props and hook return types from the wrapped hook’s signature, has a single focused test file (tests/index.test.tsx) covering Provider/selector behavior via @testing-library/react, and keeps the runtime logic to roughly 90 lines with clear inline comments explaining the type-level tricks.

API Design The public API is a single default export, constate(useValue, ...selectors), that mirrors the shape of the hook it wraps: consumers write ordinary custom hooks first and only add Constate afterward, so adopting or removing it requires touching just one line, and the README documents both the basic and selector-based advanced usage with runnable examples.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search