Proposal: React hooks
- Dominant language
- TypeScript
- Stars
- 929
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
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:
```js
import React from 'react';
import { ProppyProvider } from 'proppy-react';
const providers = {
foo: 'foo value',
bar: 'bar value',
};
export default function Root() {
return (
);
}
```
And the sample factory:
```js
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:
```js
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 (
setCounter(counter + 1)}>
{counter}
);
}
```
## `useProviders`
Access all the providers:
```js
import React from 'react';
import { useProviders } from 'x';
export default function MyComponent(props) {
const { foo, bar } = useProviders();
return
;}
```
## `useProvider`
Access individual providers:
```js
import React from 'react';
import { useProvider } from 'x';
export default function MyComponent(props) {
const foo = useProvider('foo');
return
;}
```
Contributor guide
Assessment
This issue has not been assessed yet.