React-flypro NPM

React Flypro

React bindings for Flypro.
Easy and flexible.

Installation

React Flypro requires React 0.14 or later.

npm install --save react-flypro

This assumes you are using npm as your package manager.
If you don't, you can access these files on unpkg, download them, or point your package manager to them.

Most commonly people consume React Flypro as a collection of CommonJS modules. These modules are what you get when you import react-flypro in a Webpack, Browserify, or a Node environment.

If you don't use a module bundler, it's also fine. The react-flypro npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a <script> tag on the page. The UMD builds make Flypro available as a window.ReactFlypro global variable.

The React Flypro source code is written in ES2015 but it is precompiled both CommonJS and UMD builds to ES5 so they work in any modern browser.

API

`wrap([states], [handlers])`

Wrap React component to Flypro store.
It does not modify the component class passed to it. It returns a new, wrapped component class, for you to use.

Arguments

[states(state, [ownProps]): stateProps]: if the function is specified, the component will subscribe to Flypro store updates. Any time it updates, states will be called. Its result must be a plain object, and it will be merged into the component’s props. If ownProps is specified as a second argument, its value will be the props passed to your component, and states will be additionally re-invoked whenever the component receives new props.
[handlers(send, [ownProps]): sendProps]: if a function is passed, it will be given send. The default implementation injects send into your component’s props. If ownProps is specified as a second argument, its value will be the props passed to your component, and handlers will be re-invoked whenever the component receives new props.

Returns

A React component class that injects state and commands into your component according to the specified options.

Gist

Let's take a look how Counter bindings work under the hood.

import wrap from 'react-flypro';

// Presentational component
const Counter = ({value, onIncrement, onDecrement}) => (
    <div>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
            +
        </button>
        {' '}
        <button onClick={onDecrement}>
            -
        </button>
    </div>
);

// Inject state as a value prop
const states = (state) => ({
    value: state
});

// Inject INCREMENT/DECREMENT commands as onIncrement/onDecrement callbacks
const handlers = (send) => ({
    onIncrement: () => {
        send({ type: 'INCREMENT' });
    },
    onDecrement: () => {
        send({ type: 'DECREMENT' });
    }
});

// Exporting wrapped Counter component with states and handlers as props
export default wrap(
    states,
    handlers
)(Counter)

That's it!