# Constate

Write local state using [React Hooks](https://reactjs.org/docs/hooks-intro.html) and lift it up to [React Context](https://reactjs.org/docs/context.html) only when needed with minimum effort.

🕹 CodeSandbox demos 🕹
Counter	I18n	Theming	TypeScript	Wizard Form

## Basic example ```jsx import React, { useState } from "react"; import constate from "constate"; // 1️⃣ Create a custom hook as usual function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount(prevCount => prevCount + 1); return { count, increment }; } // 2️⃣ Wrap your hook with the constate factory const [CounterProvider, useCounterContext] = constate(useCounter); function Button() { // 3️⃣ Use context instead of custom hook const { increment } = useCounterContext(); return ; } function Count() { // 4️⃣ Use context in other components const { count } = useCounterContext(); return {count}; } function App() { // 5️⃣ Wrap your components with Provider return ( ; } function Count() { // 5️⃣ Use the state context in other components const count = useCount(); return {count}; } function App() { // 6️⃣ Wrap your components with Provider passing props to your hook return ( ; } function Count() { const count = useCount(); return {count}; } ``` ## Contributing If you find a bug, please [create an issue](https://github.com/diegohaz/constate/issues/new) providing instructions to reproduce it. It's always very appreciable if you find the time to fix it. In this case, please [submit a PR](https://github.com/diegohaz/constate/pulls). If you're a beginner, it'll be a pleasure to help you contribute. You can start by reading [the beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/). When working on this codebase, please use `yarn`. Run `yarn examples` to run examples. ## License MIT © [Diego Haz](https://github.com/diegohaz)

	Stars	Issues	Version	Updated	Created
constate			3.3.2	2 years ago	6 years ago
easy-peasy	5,025	12	6.0.4	7 months ago	6 years ago
react-tracked			2.0.0	7 days ago	5 years ago
react-use-state-x	1,633	24	0.9.2	5 years ago	5 years ago
zustand	43,026	7	4.5.2	2 months ago	5 years ago

constate vs easy-peasy vs react-tracked vs react-use-state-x vs zustand

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past