{"id":23521232,"url":"https://github.com/vaaralav/react-knockout","last_synced_at":"2025-04-19T19:43:10.607Z","repository":{"id":50942460,"uuid":"116166370","full_name":"vaaralav/react-knockout","owner":"vaaralav","description":"Utilities to connect Knockout observables to React components","archived":false,"fork":false,"pushed_at":"2021-05-27T07:22:14.000Z","size":1866,"stargazers_count":3,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T12:22:59.252Z","etag":null,"topics":["knockoutjs","react","react-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vaaralav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-03T17:57:29.000Z","updated_at":"2021-05-27T06:54:53.000Z","dependencies_parsed_at":"2022-08-25T14:00:33.525Z","dependency_job_id":null,"html_url":"https://github.com/vaaralav/react-knockout","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaaralav%2Freact-knockout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaaralav%2Freact-knockout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaaralav%2Freact-knockout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaaralav%2Freact-knockout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaaralav","download_url":"https://codeload.github.com/vaaralav/react-knockout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249783749,"owners_count":21325164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["knockoutjs","react","react-component"],"created_at":"2024-12-25T17:11:27.627Z","updated_at":"2025-04-19T19:43:10.591Z","avatar_url":"https://github.com/vaaralav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-knockout\n\n[![Build Status](https://travis-ci.org/vaaralav/react-knockout.svg?branch=master)](https://travis-ci.org/vaaralav/react-knockout)\n[![npm version](https://badge.fury.io/js/react-knockout.svg)](https://npmjs.com/package/react-knockout)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](LICENSE)\n\n- [Install](#install)\n- [Demo](#demo)\n- [Usage](#usage)\n- [API](#api)\n- [License](#license)\n\n## Install\n\n```bash\nnpm install --save react-knockout\n```\n\n## Demo\n\nLive demo: https://vaaralav.github.io/react-knockout\n\nSource code: [`example/src`](example/src)\n\nSandbox: https://codesandbox.io/s/github/vaaralav/react-knockout/tree/master/example\n\n## Usage\n\n### `KoSubscribe`- Subscribe to observables on the go\n\n```jsx\nimport React, { Component } from 'react';\nimport counter from './counter'; // ko.observable\n\nimport { KoSubscribe } from 'react-knockout';\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cKoSubscribe\n        subscribe={{\n          counter,\n        }}\n        render={({ counter }) =\u003e \u003cpre\u003e{counter}\u003c/pre\u003e}\n      /\u003e\n    );\n  }\n}\n```\n\n### `KoProvider` - Handle subscriptions at high level and connect where needed\n\n```jsx\nimport React, { Component } from 'react';\nimport counter from './counter'; // ko.observable\nimport status from './status'; // ko.observable\nimport queue from './queue'; // ko.observable\n\nimport {\n  KoProvider,\n  ConnectedKoSubscribe,\n  withKoSubscribe,\n} from 'react-knockout';\n\nfunction Status({ state: { status = 'Unknown', queue = [] } }) {\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003e{status}\u003c/h3\u003e\n      \u003col\u003e{queue.map(val =\u003e \u003cli\u003e{val}\u003c/li\u003e)}\u003c/ol\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst ConnectedStatus = withKoSubscribe(Status);\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cKoProvider\n        subscribe={{\n          counter,\n          status,\n          queue,\n        }}\n      \u003e\n        \u003cdiv\u003e\n          \u003cConnectedKoSubscribe\n            render={({ counter }) =\u003e \u003cpre\u003e{counter}\u003c/pre\u003e}\n          /\u003e\n          \u003cConnectedStatus /\u003e\n        \u003c/div\u003e\n      \u003c/KoProvider\u003e\n    );\n  }\n}\n```\n\n## API\n\n### `\u003cKoSubscribe subscribe render\u003e`\n\nMakes subscribed ko.observable changes to call the render function provided as `render` or `children` prop.\n\n#### Props\n\n- `subscribe`(Object of ko.observables): The ko.observables you want to subscribe.\n- `render` or `children` (Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.\n\n#### Example\n\nUsing function as `children`.\n\n```jsx\nReactDOM.render(\n  \u003cKoSubscribe\n    subscribe={{\n      greeting: ko.observable('Hello'),\n      name: ko.observable('world'),\n    }}\n  \u003e\n     {({ greeting, name }) =\u003e `${greeting}, ${name}!`}\n  \u003c/KoSubscribe\u003e,\n  element,\n);\n```\n\nUsing `render` prop.\n\n```jsx\nReactDOM.render(\n  \u003cKoSubscribe\n    subscribe={{\n      greeting: ko.observable('Hello'),\n      name: ko.observable('world'),\n    }}\n    render={({ greeting, name }) =\u003e `${greeting}, ${name}!`}\n  /\u003e,\n  element,\n);\n```\n\n### `\u003cKoProvider subscribe\u003e`\n\nMakes the subscribed ko.observables available to `withKoSubscribe` and `\u003cConnectedKoSubscribe\u003e` in the component hierarchy.\n\n#### Props\n\n- `subscribe`(Object of ko.observables): The ko.observables you want to subscribe.\n- `children` (ReactElement): The root of your component hierarchy.\n\n#### Example\n\n```jsx\nReactDOM.render(\n  \u003cKoProvider subscribe={subscriptions}\u003e\n      \u003cMyRootComponent /\u003e\n  \u003c/KoProvider\u003e,\n  element,\n);\n```\n\n### `\u003cConnectedKoSubscribe render\u003e`\n\nA connected component that gives access to observables subscribed with `\u003cKoProvider\u003e` above in the component hierarchy.\n\n#### Props\n\n- `render` or `children` (Function): A function that gets the values of the subscribed observables as the first parameter and returns JSX.\n\n#### Example\n\n```jsx\nReactDOM.render(\n  \u003cKoProvider\n    subscribe={{\n      greeting: ko.observable('Hello'),\n      name: ko.observable('world'),\n    }}\n  \u003e\n    \u003cConnectedKoSubscribe\u003e\n      {({ greeting, name }) =\u003e `${greeting}, ${name}!`}\n    \u003c/ConnectedKoSubscribe\u003e\n  \u003c/KoProvider\u003e,\n  element,\n);\n```\n\n### `withKoSubscribe(Component)`\n\nA higher-order component that gives access to observables subscribed with `\u003cKoProvider\u003e` above in the component hierarchy.\n\n#### Arguments\n\n- `Component` (ReactComponent): A component that will receive the values of subscribed observables as `state` prop.\n\n#### Example\n\n```jsx\nconst Greeter = ({ state }) =\u003e `${state.greeting}, ${state.name}!`;\nconst ConnectedGreeter = withKoSubscribe(Greeter);\n\nReactDOM.render(\n  \u003cKoProvider\n    subscribe={{\n      greeting: ko.observable('Hello'),\n      name: ko.observable('world'),\n    }}\n  \u003e\n    \u003cConnectedGreeter /\u003e\n  \u003c/KoProvider\u003e,\n  element,\n);\n```\n\n## License\n\nMIT © [Ville Vaarala](https://github.com/vaaralav)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaaralav%2Freact-knockout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaaralav%2Freact-knockout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaaralav%2Freact-knockout/lists"}