https://github.com/vaaralav/react-knockout
Utilities to connect Knockout observables to React components
https://github.com/vaaralav/react-knockout
knockoutjs react react-component
Last synced: about 1 year ago
JSON representation
Utilities to connect Knockout observables to React components
- Host: GitHub
- URL: https://github.com/vaaralav/react-knockout
- Owner: vaaralav
- License: mit
- Created: 2018-01-03T17:57:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-27T07:22:14.000Z (about 5 years ago)
- Last Synced: 2025-03-29T12:22:59.252Z (about 1 year ago)
- Topics: knockoutjs, react, react-component
- Language: JavaScript
- Homepage:
- Size: 1.78 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-knockout
[](https://travis-ci.org/vaaralav/react-knockout)
[](https://npmjs.com/package/react-knockout)
[](LICENSE)
- [Install](#install)
- [Demo](#demo)
- [Usage](#usage)
- [API](#api)
- [License](#license)
## Install
```bash
npm install --save react-knockout
```
## Demo
Live demo: https://vaaralav.github.io/react-knockout
Source code: [`example/src`](example/src)
Sandbox: https://codesandbox.io/s/github/vaaralav/react-knockout/tree/master/example
## Usage
### `KoSubscribe`- Subscribe to observables on the go
```jsx
import React, { Component } from 'react';
import counter from './counter'; // ko.observable
import { KoSubscribe } from 'react-knockout';
class Example extends Component {
render() {
return (
{counter}}
/>
);
}
}
```
### `KoProvider` - Handle subscriptions at high level and connect where needed
```jsx
import React, { Component } from 'react';
import counter from './counter'; // ko.observable
import status from './status'; // ko.observable
import queue from './queue'; // ko.observable
import {
KoProvider,
ConnectedKoSubscribe,
withKoSubscribe,
} from 'react-knockout';
function Status({ state: { status = 'Unknown', queue = [] } }) {
return (
{status}
{queue.map(val => - {val}
)}
);
}
const ConnectedStatus = withKoSubscribe(Status);
class Example extends Component {
render() {
return (
{counter}}
/>
);
}
}
```
## API
### ``
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` or `children` (Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.
#### Example
Using function as `children`.
```jsx
ReactDOM.render(
{({ greeting, name }) => `${greeting}, ${name}!`}
,
element,
);
```
Using `render` prop.
```jsx
ReactDOM.render(
`${greeting}, ${name}!`}
/>,
element,
);
```
### ``
Makes the subscribed ko.observables available to `withKoSubscribe` and `` 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
```jsx
ReactDOM.render(
,
element,
);
```
### ``
A connected component that gives access to observables subscribed with `` above in the component hierarchy.
#### Props
- `render` or `children` (Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.
#### Example
```jsx
ReactDOM.render(
{({ greeting, name }) => `${greeting}, ${name}!`}
,
element,
);
```
### `withKoSubscribe(Component)`
A higher-order component that gives access to observables subscribed with `` above in the component hierarchy.
#### Arguments
- `Component` (ReactComponent): A component that will receive the values of subscribed observables as `state` prop.
#### Example
```jsx
const Greeter = ({ state }) => `${state.greeting}, ${state.name}!`;
const ConnectedGreeter = withKoSubscribe(Greeter);
ReactDOM.render(
,
element,
);
```
## License
MIT © [Ville Vaarala](https://github.com/vaaralav)