react-view-model/component
Create an auto-rendering container component with an observable view-model.
class App extends Component
Create an auto-rendering container component by connecting an observable can-define/map/map view-model to a React presentational component.
import { Component } from 'react-view-model';
export default class AppComponent extends Component {
...
}
AppComponent.ViewModel = DefineMap.extend({
...
});
Every instance of the component will generate an instance of the ViewModel, initialized with the props, and provide it as this.viewModel
. Whenever the container component receives new props, the new values are passed to the viewModel’s .set()
method, which may in turn cause an observable change event, which will re-run the observed render process.
Note: If you extend any of the React lifecycle methods, you must call super
so as not to break the view-model binding. This includes: componentWillReceiveProps
, componentWillMount
, componentDidMount
, componentWillUpdate
, componentDidUpdate
, and componentWillUnmount
.
Use
An example application using the ViewModel to create an extra prop, whose value is derived from other props.
An example application which includes viewModel mutation and demonstrates auto-rendering.
You can also play with the above example on JS Bin:
react-view-model/component demo on jsbin.com
You can also use this module with Preact:
react-view-model/component demo with Preact on jsbin.com
Here’s a recreation of the clock example from React’s State and Lifecycle docs: