kefir-react's Introduction

kefir-react

React wrapper component for linking Kefir.js observables as props value

import { KefirReact } from 'kefir-react';

const myProperty = Kefir.fromPoll(1, () => new Date()})
    .toProperty(() => new Date());

class App extends React.Component {
    render() {
        return this.props.myValue;
    }
}

const AppWrapped = KefirReact(
    myProperty.map(myValue => { myValue }),
    App
);

class Main extends React.Component {
    render() {
        return React.createElement(AppWrapped);
    }
}

API

Exports KefirReact factory and KefirReactComponent react component

`KefirReact`

(props$, ComponentClass, [LoaderComponentClass]) -> WrappedComponentClass

So in props of instantiated ComponentClass there will be values from props$

LoaderComponentClass is optional. It'll be displayed until first value in props$.

Use kefir-combine-object to create props$

kefir-react's People

Contributors

Stargazers

Watchers

kefir-react's Issues

Simplify API

const KefirReact = (observable, Component) => {
    return props => h(KefirReactComponent, {
        observable,
        render: values => h(Component, merge(props, values))
    });
}

class Test extends React.Component {
    render() {
        return h(KefirReact(stream, MyComponent));
    }
}

const Test = KefirReact(stream, MyComponent);

ReactDOM.render(
    h(KefirReact(stream, MyComponent)),
    $('#app')
);

And export both KefirReact and KefirReactComponent. The second can be used when observable depends on props.

But there is a problem with observable - it should be KefirObservable<props>, and in most cases it will be combined object of Observables. But it still not implemented in Kefir: https://github.com/rpominov/kefir/issues/143

Recommend Projects