# 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
react-tracked	2,628	2	1.7.14	2 months ago	5 years ago
reactive-react-redux	502	27	4.9.0	4 years ago	5 years ago
unstated-next			1.1.0	5 years ago	5 years ago

constate vs react-tracked vs reactive-react-redux vs unstated-next

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past