flyd-lift-react

Lift React components to take Flyd streams.

Usage no npm install needed!

<script type="module">
  import flydLiftReact from 'https://cdn.skypack.dev/flyd-lift-react';
</script>

README

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.