flyd-lift-react

2.2.0 • Public • Published

Lift React Component

NPM version Build status Dependencies

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.

Readme

Keywords

Package Sidebar

Install

npm i flyd-lift-react

Weekly Downloads

0

Version

2.2.0

License

ISC

Last publish

Collaborators

  • jasperwoudenberg