react-knockout
Install
npm install --save react-knockout
Demo
Live demo: https://vaaralav.github.io/react-knockout
Source code: example/src
Sandbox: https://codesandbox.io/s/github/vaaralav/react-knockout/tree/master/example
Usage
KoSubscribe
- Subscribe to observables on the go
import React Component from 'react';import counter from './counter'; // ko.observable import KoSubscribe from 'react-knockout'; { return <KoSubscribe = = /> ; }
KoProvider
- Handle subscriptions at high level and connect where needed
import React Component from 'react';import counter from './counter'; // ko.observableimport status from './status'; // ko.observableimport queue from './queue'; // ko.observable import KoProvider ConnectedKoSubscribe withKoSubscribe from 'react-knockout'; { return <div> <h3>status</h3> <ol>queue</ol> </div> ;} const ConnectedStatus = ; { return <KoProvider = > <div> <ConnectedKoSubscribe = /> <ConnectedStatus /> </div> </KoProvider> ; }
API
<KoSubscribe subscribe render>
Makes subscribed ko.observable changes to call the render function provided as render
or children
prop.
Props
subscribe
(Object of ko.observables): The ko.observables you want to subscribe.render
orchildren
(Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.
Example
Using function as children
.
ReactDOM;
Using render
prop.
ReactDOM;
<KoProvider subscribe>
Makes the subscribed ko.observables available to withKoSubscribe
and <ConnectedKoSubscribe>
in the component hierarchy.
Props
subscribe
(Object of ko.observables): The ko.observables you want to subscribe.children
(ReactElement): The root of your component hierarchy.
Example
ReactDOM;
<ConnectedKoSubscribe render>
A connected component that gives access to observables subscribed with <KoProvider>
above in the component hierarchy.
Props
render
orchildren
(Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.
Example
ReactDOM;
withKoSubscribe(Component)
A higher-order component that gives access to observables subscribed with <KoProvider>
above in the component hierarchy.
Arguments
Component
(ReactComponent): A component that will receive the values of subscribed observables asstate
prop.
Example
const Greeter = state `, !`;const ConnectedGreeter = ; ReactDOM;
License
MIT © Ville Vaarala