whitelizard / unstated-hoc

Enabling functional HOC for unstated Subscribe

unstated-hoc

A HOC (Higher Order Component) for Unstated Subscribe.

This tiny module was made to get a more functional way of using Unstated -- similar to redux's way of binding state to a component with connect, and also similar to and compatible with recompose.

This example from Unstated:

function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

With this module becomes:

const CounterView = ({ counter }) => (
  <div>
    <button onClick={() => counter.decrement()}>-</button>
    <span>{counter.state.count}</span>
    <button onClick={() => counter.increment()}>+</button>
  </div>
);
const Counter = subscribeTo([CounterContainer], ['counter'])(CounterView);

Another variation, with recompose:

import { compose } from 'recompose';

const Counter = compose(
  subscribeTo([CounterContainer], ['counter'])
  // other possible HOCs
)(({ counter }) => (
  <div>
    <button onClick={() => counter.decrement()}>-</button>
    <span>{counter.state.count}</span>
    <button onClick={() => counter.increment()}>+</button>
  </div>
));

Licence

MIT