reunx v1.0.3

reunx

🐧Hooks as store.

APIs

A well-designed library whose APIs must be elegant and simple enough.

This library only exposes three functions: createX, useX, combineProviders.

createX is used to create a ‘X’ object, which contain a react context and a provider:

type X<T> = {
  Provider: React.FC
  Context: React.Context<T>
}

the X object can be consumed by useX:

const CounterX = createX(useCounter) // useCounter is a react hook
const { count, decrement, increment } = useX(CounterX)

To avoid multiple levels of nesting of providers, you can use combineProviders to combine lots of providers as one provider, and use useX(Xobject) or useContext(Xobject.Context) to get the specific context

const Provider = combineProviders(CounterX.Provider, TimerX.Provider)

Full support for TypeScript!

examples

import React, { useState, useEffect, useCallback } from 'react'
import { createX, useX, combineProviders } from '../src/index'

const useCounter = (initialState = 0) => {
  const [count, setCount] = useState(initialState)
  const decrement = useCallback(() => setCount(count - 1), [count])
  const increment = useCallback(() => setCount(count + 1), [count])

  return { count, decrement, increment }
}

const useTimer = (initialState = 0) => {
  const [time, setTime] = useState(initialState)

  useEffect(() => {
    const timer = setInterval(
      () => setTime(t => t + 1),
      1000,
    )

    return () => {
      clearInterval(timer)
    }
  })

  return time
}

const CounterX = createX(useCounter)
const TimerX = createX(useTimer)

const Counter = () => {
  const { count, decrement, increment } = useX(CounterX)

  return (
    <div>
      count: {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

const Timer = () => {
  const time = useX(TimerX)

  return <div>timer: {time}</div>
}

const Provider = combineProviders(CounterX.Provider, TimerX.Provider)

const App = () => (
  <Provider>
    <Counter />
    <Timer />
    <Counter />
    <Timer />
  </Provider>
)