Proposal: React hooks

[fahad19]

WIP branch exists here: https://github.com/fahad19/proppy/tree/proppy-react-hook

Background

React hooks will land soon in stable version, and currently already available in alpha version.

More info: https://reactjs.org/docs/hooks-intro.html

Set up

For the examples below, we will be using these providers:

import React from 'react';
import { ProppyProvider } from 'proppy-react';

const providers = {
  foo: 'foo value',
  bar: 'bar value',
};

export default function Root() {
  return (
    <ProppyProvider providers={providers}>
      <MyComponent />
    </ProppyProvider>
  );
}

And the sample factory:

import { compose, withProps, withState, shouldUpdate } from 'proppy';

const P = compose(
  withProps((props, providers) => {}),
  withState('counter', 'setCounter', 0),
  shouldUpdate(props => props.counter % 2 === 0),
);

Usage APIs

useProppy

Using Proppy factory inside Components:

import React from 'react';
import { useProppy } from 'x'; // new package

const P; // factory

export default function MyComponent(props) {
  const { counter, setCounter } = useProppy(P, props);

  return (
    <p onClick={() => setCounter(counter + 1)}>
      {counter}
    </p>
  );
}

useProviders

Access all the providers:

import React from 'react';
import { useProviders } from 'x';

export default function MyComponent(props) {
  const { foo, bar } = useProviders();

  return <p></p>;
}

useProvider

Access individual providers:

import React from 'react';
import { useProvider } from 'x';

export default function MyComponent(props) {
  const foo = useProvider('foo');

  return <p></p>;
}