react-thunk

1.0.0 • Public • Published

react-thunk

Define React functional stateless components as thunks

Install

npm i --save react-thunk

Why?

Instead of doing the following, and setting a new change listener on each render:

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:

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).

import React from 'react';
import thunk from 'react-thunk';
 
function NameField() {
    /* ... */
}
 
export default thunk(NameField);

Package Sidebar

Install

npm i react-thunk

Weekly Downloads

3,565

Version

1.0.0

License

MIT

Last publish

Collaborators

  • troch