react-thunk
Version:
Functional stateless React components returning thunks
59 lines (38 loc) • 1.21 kB
Markdown
# react-thunk
> Define React functional stateless components as thunks
## Install
```sh
npm i --save react-thunk
```
## Why?
__Instead of doing the following, and setting a new change listener on each render:__
```js
function NameField(props) {
const { name, setName } = props;
return <input type="text" value={ name } onChange={ (evt) => setName(evt.target.value) } />;
}
```
__Do the following, and only define your change listener once:__
```js
function NameField(initialProps) {
const { setName } = initialProps;
const changeHandler = (evt) => setName(evt.target.value);
return (props) => {
const { name } = props;
return <input type="text" value={ name } onChange={ changeHandler } />;
};
}
```
## How?
It creates a class for you: https://github.com/troch/react-thunk/blob/master/modules/index.js. That is all the source code.
## API
__thunk(component: Function[, pure: Boolean])__
Since a `thunk` creates a class, it gives you the opportunity to have pure components (set second argument to true).
```js
import React from 'react';
import thunk from 'react-thunk';
function NameField() {
/* ... */
}
export default thunk(NameField);
```