Constate
Lift local React state into scoped Context using a single factory around your own hooks
Repository Health
Technical Analysis
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
Providerinto 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.
Used by 3 apps in this directory
APITable
Low Code Platforms · Databases
API-first collaborative spreadsheet-database platform that auto-generates REST APIs and lets teams build internal tools, CRMs, and dashboards without code.
Kibana
Analytics · Monitoring
Your open source window into the Elastic Stack — query, visualize, and act on data stored in Elasticsearch with real-time dashboards, AI-assisted search, and automated alerting.
Plasmic
CMS · Low Code Platforms · No Code Platforms
The open-source visual builder that lets teams design React apps and websites with drag-and-drop while integrating seamlessly with your codebase.