Suggestion for API Tweak

[timkindberg]

What do you think of this API? It's a very simple change to the library, but personally I find it more elegant.

import React, { useState, useContext } from "react";
import createContainer from "constate";

// 1️⃣ Create a custom hook as usual
const useCounter = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// 2️⃣ When you need to share your state, simply wrap your hook
//    with the createContainer higher-order hook, like so:
const useCounter = createContainer(() => {
   // ... same logic here
});

function Button() {
  // 3️⃣ Use the same hook like you were before, with the same api. No change.
  const { increment } = useCounter()
  return <button onClick={increment}>+</button>;
}

function Count() {
  // 4️⃣ But now you can use it in other components as well.
  const { count } = useCounter()
  return <span>{count}</span>;
}

function App() {
  // 5️⃣ The caveat, you wrap your components with the Provider that is
  //    attached to the hook
  return (
    <useCounter.Provider>
      <Count />
      <Button />
    </useCounter.Provider>
  );
}

The change in the code is roughly this (the last 3 lines specifically):

export function createContainer(useValue, createMemoInputs) {
  const Context = React.createContext()

  const Provider = props => {
    const value = useValue(props)
    const { children } = props
    const memoizedValue = createMemoInputs ? React.useMemo(() => value, createMemoInputs(value)) : value
    return <Context.Provider value={memoizedValue}>{children}</Context.Provider>
  }

  const hook = () => useContext(Context)
  hook.Provider = Provider
  return hook
}

[diegohaz]

I'm open to it. I guess we can do this without breaking changes if we also expose useHook.Context so people could still use it like today.