unstated-next-compose

Simple provider compose for unstated-next

Usage

import React, { useState } from 'react';
import { createContainer } from 'unstated-next';

import { Compose } from 'unstated-next-compose'; // <---

const useProvider1 = () => {
  const [a, setA] = useState(0);
  return { a, setA }
}

const Provider1 = createContainer(useProvider1);

const ComponentA = (props) => {
  const { a, setA } = Provider1.useContainer()
  return <button onClick={() => setA(a + 1)}>A={a}</button>
}
const useProvider2 = () => {
  const [b, setB] = useState(0);
  return { b, setB }
}

const Provider2 = createContainer(useProvider2);

const ComponentB = (props) => {
  const { b, setB } = Provider2.useContainer()
  return <button onClick={() => setB(b + 1)}>B={b}</button>
}

const store = [Provider1.Provider, Provider2.Provider];  // <---

export default () => (
  <Compose providers={store}>  // <---
    <ComponentA />
    <ComponentB />
  </Compose>
)