simple unstated next, useContext to manage state

simple-unstated-next.ts

import React from 'react'

interface ContainerProviderProps<State = void> {
  initialState?: State
  children: React.ReactNode
}

const usecontext = React.useContext

export default function createContainer<Value, State = void>(
  usehook: (initialState?: State) => Value,
) {
  const Context = React.createContext<Value | null>(null)

  function Container(props: ContainerProviderProps<State>): JSX.Element
  function Container(): Value
  function Container(props?: ContainerProviderProps<State>): Value | JSX.Element {
    if (props) {
      const value = usehook(props.initialState)
      return React.createElement(Context.Provider, { value }, props.children)
    }
    const value = usecontext(Context)
    if (value === null) {
      throw new Error('Component must be wrapped with container component returned by `createContainer`.')
    }
    return value
  }
  if (usehook.name) {
    Object.defineProperty(Container, 'name', {
      value: usehook.name,
      configurable: true
    })
  }
  return Container
}

import React, { useState } from "react"
import createContainer from "./simple-unstated-next.js"

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

const Counter = createContainer(useCounter)

function CounterDisplay() {
  const { decrement, count, increment } = Counter()
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

export default function App() {
  return (
    <Counter>
      <CounterDisplay />
      <Counter initialState={2}>
        <div>
          <div>
            <CounterDisplay />
          </div>
        </div>
      </Counter>
    </Counter>
  )
}