flyd-lift-react

Lift React Component

A higher order React component for use with flyd.

Combining React and flyd for an elm-like architecture couldn't be easier. Just look at this example:

// Write an ordinary React component that takes some props:
const Counter = ({value, increment}) => (
    <div onClick={increment}>
        {value}
    </div>
);

// Lift it
import Lift from 'flyd-lift-react';
const LiftedCounter = Lift(Counter);

// Use it
import { stream } from 'flyd';
const clicks = stream();
const value = stream([clicks], self => self((self() || 0) + 1));

import { render } from 'react-dom';
render(
    <LiftedCounter value={value} increment={e => clicks(e)} />,
    document.body
);

Lift is a higher order React component.

• Pass a mix of streams an ordinary values as props to your lifted component.
• The component being lifted will only receive normal values as props.
• If a stream updates, so so will the lifted component.