chore: Update examples

examples/counter/App.js

@@ -1,35 +1,35 @@
 import React, { useState } from "react";
-import createContextHook from "constate";
+import constate from "constate";
 
 // 1️⃣ Create a custom hook as usual
 function useCounter() {
   const [count, setCount] = useState(0);
-  const increment = () => setCount(count + 1);
+  const increment = () => setCount(prevCount => prevCount + 1);
   return { count, increment };
 }
 
-// 2️⃣ Create container
-const useCounterContext = createContextHook(useCounter, value => [value.count]);
+// 2️⃣ Wrap your hook with the constate factory
+const [CounterProvider, useCounterContext] = constate(useCounter);
 
 function Button() {
-  // 3️⃣ Use container context instead of custom hook
+  // 3️⃣ Use context instead of custom hook
   const { increment } = useCounterContext();
   return <button onClick={increment}>+</button>;
 }
 
 function Count() {
-  // 4️⃣ Use container context in other components
+  // 4️⃣ Use context in other components
   const { count } = useCounterContext();
   return <span>{count}</span>;
 }
 
 function App() {
-  // 5️⃣ Wrap your components with container provider
+  // 5️⃣ Wrap your components with Provider
   return (
-    <useCounterContext.Provider>
+    <CounterProvider>
       <Count />
       <Button />
-    </useCounterContext.Provider>
+    </CounterProvider>
   );
 }
 

examples/counter/package.json

@@ -15,7 +15,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "1.3.0",
+    "constate": "1.3.1",
     "parcel-bundler": "1.12.4",
     "react": "16.10.2",
     "react-dom": "16.10.2"

examples/i18n/App.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import createContextHook from "constate";
+import constate from "constate";
 
 const translations = {
   en: {
@@ -16,8 +16,7 @@ function useI18n() {
   return { lang, locales, setLang };
 }
 
-// Only re-evaluate useI18n return value when lang changes
-const useI18NContext = createContextHook(useI18n, value => [value.lang]);
+const [I18NProvider, useI18NContext] = constate(useI18n);
 
 function useTranslation(key) {
   const { lang } = useI18NContext();
@@ -42,11 +41,11 @@ function Label(props) {
 
 function App() {
   return (
-    <useI18NContext.Provider>
+    <I18NProvider>
       <Label htmlFor="select" />
       <br />
       <Select id="select" />
-    </useI18NContext.Provider>
+    </I18NProvider>
   );
 }
 

examples/i18n/package.json

@@ -16,7 +16,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "1.3.0",
+    "constate": "1.3.1",
     "parcel-bundler": "1.12.4",
     "react": "16.10.2",
     "react-dom": "16.10.2"

examples/theming/App.js

@@ -1,11 +1,15 @@
 import React, { useState } from "react";
-import createContextHook from "constate";
 import { GithubPicker } from "react-color";
+import constate from "constate";
 
-const useThemeContext = createContextHook(props =>
-  useState(props.initialColor)
+const [ThemeProvider, useThemeContext, useThemeColor] = constate(
+  props => useState(props.initialColor),
+  value => value,
+  ([color]) => color
+);
+const [PickerVisibilityProvider, usePickerVisibilityContext] = constate(() =>
+  useState(false)
 );
-const usePickerVisibilityContext = createContextHook(() => useState(false));
 
 function Picker() {
   const [color, setColor] = useThemeContext();
@@ -24,7 +28,7 @@ function Picker() {
 }
 
 function Button() {
-  const [background] = useThemeContext();
+  const background = useThemeColor();
   const [visible, setVisible] = usePickerVisibilityContext();
   return (
     <button style={{ background }} onClick={() => setVisible(!visible)}>
@@ -35,12 +39,12 @@ function Button() {
 
 function App() {
   return (
-    <useThemeContext.Provider initialColor="red">
-      <usePickerVisibilityContext.Provider>
+    <ThemeProvider initialColor="red">
+      <PickerVisibilityProvider>
         <Button />
         <Picker />
-      </usePickerVisibilityContext.Provider>
-    </useThemeContext.Provider>
+      </PickerVisibilityProvider>
+    </ThemeProvider>
   );
 }
 

examples/theming/package.json

@@ -16,7 +16,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "1.3.0",
+    "constate": "1.3.1",
     "parcel-bundler": "1.12.4",
     "react": "16.10.2",
     "react-color": "2.17.3",

examples/typescript/App.tsx

@@ -1,31 +1,35 @@
 // It just works! No need to type anything explicitly.
 import * as React from "react";
-import createContextHook from "constate";
+import constate from "constate";
 
 function useCounter({ initialCount = 0 } = {}) {
   const [count, setCount] = React.useState(initialCount);
-  const increment = () => setCount(count + 1);
+  const increment = React.useCallback(() => setCount(c => c + 1), []);
   return { count, increment };
 }
 
-const useCounterContext = createContextHook(useCounter, value => [value.count]);
+const [CounterProvider, useCount, useIncrement] = constate(
+  useCounter,
+  value => value.count,
+  value => value.increment
+);
 
 function IncrementButton() {
-  const { increment } = useCounterContext();
+  const increment = useIncrement();
   return <button onClick={increment}>+</button>;
 }
 
 function Count() {
-  const { count } = useCounterContext();
+  const count = useCount();
   return <span>{count}</span>;
 }
 
 function App() {
   return (
-    <useCounterContext.Provider initialCount={10}>
+    <CounterProvider initialCount={10}>
       <Count />
       <IncrementButton />
-    </useCounterContext.Provider>
+    </CounterProvider>
   );
 }
 

examples/typescript/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@types/react": "16.9.9",
     "@types/react-dom": "16.9.2",
-    "constate": "1.3.0",
+    "constate": "1.3.1",
     "parcel-bundler": "1.12.4",
     "react": "16.10.2",
     "react-dom": "16.10.2",

examples/wizard-form/App.js

@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from "react";
-import createContextHook from "constate";
+import constate from "constate";
 
-const useStepContext = createContextHook(useStep, value => [value.step]);
-const useFormContext = createContextHook(useFormState, value => [value.values]);
+const [StepProvider, useStepContext] = constate(useStep);
+const [FormProvider, useFormContext, useFormValues] = constate(
+  useFormState,
+  value => value,
+  value => value.values
+);
 
 function useStep({ initialStep = 0 } = {}) {
   const [step, setStep] = useState(initialStep);
@@ -72,7 +76,7 @@ function NameEmailForm({ onSubmit, onBack }) {
 }
 
 function Values() {
-  const { values } = useFormContext();
+  const values = useFormValues();
   return <pre>{JSON.stringify(values, null, 2)}</pre>;
 }
 
@@ -91,12 +95,12 @@ function Wizard() {
 
 function App() {
   return (
-    <useStepContext.Provider>
-      <useFormContext.Provider initialValues={{ age: 18 }}>
+    <StepProvider>
+      <FormProvider initialValues={{ age: 18 }}>
         <Wizard />
         <Values />
-      </useFormContext.Provider>
-    </useStepContext.Provider>
+      </FormProvider>
+    </StepProvider>
   );
 }
 

examples/wizard-form/package.json

@@ -15,7 +15,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "1.3.0",
+    "constate": "1.3.1",
     "parcel-bundler": "1.12.4",
     "react": "16.10.2",
     "react-dom": "16.10.2"

examples/yarn.lock

@@ -1467,10 +1467,10 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-constate@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/constate/-/constate-1.3.0.tgz#b49bc8adf095fb0f3ecc3b06d506f111efa59fb3"
-  integrity sha512-dtV/Ao4NmNDmrapLe6xxzPoGASaF0UJe4P/h/kesuri7xozykH1+yYO+TDR7Y4HHW6zeYR9gHHR0tIBkC6or6Q==
+constate@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/constate/-/constate-1.3.1.tgz#453b60c0d05d2b7cd7206dcb98799afd12eff50e"
+  integrity sha512-kS0J6IQ5rLC4jIc6hjyDsf2Fl6lXvWwIpqoAhLmATOHJGehTAgPewdHhh0miHiT1NmGR1GHNlv7zKWbcUfbHpQ==
 
 convert-source-map@^1.1.0, convert-source-map@^1.5.1:
   version "1.6.0"