# 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
@reduxjs/toolkit			2.2.5	11 hours ago	5 years ago
constate	3,915	9	3.3.2	2 years ago	6 years ago
mobx	27,257	58	6.12.3	2 months ago	8 years ago
recoil			0.7.7	a year ago	4 years ago
storeon	1,967	13	3.1.5	2 years ago	5 years ago
zustand	43,094	7	4.5.2	3 months ago	5 years ago

@reduxjs/toolkit vs constate vs mobx vs recoil vs storeon vs zustand

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past