# 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	公開日時	ライセンス

constate	132,602	3,982	20.7 kB	9	4ヶ月前	MIT