UNPKG

react-thunk

Version:

Functional stateless React components returning thunks

59 lines (38 loc) 1.21 kB
# 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); ```