knockout-bind-react

A custom binding for KnockoutJS that renders a given ReactJS component within the specified element. Use when adding React components to an application that is KnockoutJS heavy, such as one that employs the Durandal framework.


Keywords
knockout, react, durandal, knockoutjs, reactjs, durandaljs, bind, binder, component
License
MIT
Install
bower install knockout-bind-react

Documentation

knockout-bind-react

A custom binding for KnockoutJS that renders a given ReactJS component within the specified element.

Installation

npm install knockout-bind-react

Include via your preferred AMD/CommonJS loader, or with a <script> tag.

Usage

The react binding expects one value, an object containing the various options for the component:

  • component: The desired React component
  • props: An object containing the props to be passed into the the React component
<div data-bind="react: reactOptions"><div>
var viewModel = {
	self.reactOptions = {
		component: ReactButton,
			props: {
				color: 'red',
				type: 'primary'
			}
	};
};

See index.html, or this example page, for more detailed and dynamic usage.