react-compose-state

react-compose-state
===================


A helper function to attach state to
stateless function components.

Background
----------

Since React v0.14, stateless function components are supported,
which allows you to write a component as a pure function.
This is very handy with ES2015 and JSX. Here is an example.

``javascript
const Hello = ({ name }) => (

);
`

It is recommended to use stateless components as much as possible,
and once you are used to it, you might want to avoid writing class-based components.
Class-based components are powerful and you can mange lifecycles of components,
but the state is one of what is required often, especially if using an external store (like Flux) is not an option.

This package provides an easy way to add state to statelss components.
This avoids the use of this which is also known as thisless javascript.

Install
-------

`bash
npm install react-compose-state --save
`

Usage
-----

One liner:

`javascript
import React from 'react';
import { composeWithState } from 'react-compose-state';

const Counter = composeWithState({ counter: 1 })(({ counter, setCounter }) => (



));
`

With PropTypes:

`javascript
import React from 'react';
import PropTypes from 'prop-types';
import { composeWithState } from 'react-compose-state';

const Counter = ({ counter, setCounter }) => (


));

Counter.propTypes = {
counter: PropTypes.number.isRequired,
setCounter: PropTypes.func.isRequired,
}

const initialState = { counter: 1 };

export default composeWithState(initialState)(Counter);
`

With options:

`javascript
import React from 'react';
import PropTypes from 'prop-types';
import { composeWithState } from 'react-compose-state';

const Counter = ({ counter, updateCounter }) => (


));

Counter.propTypes = {
counter: PropTypes.number.isRequired,
updateCounter: PropTypes.func.isRequired,
}

const initialState = { counter: 1 };
const options = {
setters: {
counter: 'updateCounter',
},
};

export default composeWithState(initialState, options)(Counter);
`

Example
-------

The example folder contains a working example.
You can run it with

`bash
PORT=8080 npm run example
``

and open in your web browser.