fahad19 / fahad19/proppy

Proposal: React hooks

Open
#39 0 comments 0 reactions 0 assignees View on GitHub
proposal
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.