GitHub
Twitterreact-view-model
Create an auto-rendering container component with an observable view-model by providing a ViewModel and a React render function.
reactViewModel( [displayName], [ViewModel], renderFunction )
Create an auto-rendering container component by connecting an observable view-model to a React presentational render function.
Every instance of the component will generate an instance of the ViewModel, initialized with the props, and provide it to the render function. Whenever the container component receives new props or a value on the viewModel changes, it will trigger an update.
If displayName is omitted, it will default based on the renderFunction's name, or "ReactVMComponentWrapper." This is really only significant when debugging.
If ViewModel is omitted, it will default to can-define/map/map. This will still provide the benefits of auto-rendering, though you cannot add smart properties like you can with a custom ViewModel.
export default reactViewModel( 'AppComponent', ViewModel, (viewModel) => (<div>{viewModel.name}</div>) );
Parameters
- displayName
{String}:The name of the created container component (optional)
- ViewModel
{can-define/map/map}:A can-define/map/map constructor function (optional)
- renderFunction
{function}:A React render function
Returns
{ReactComponent}:
An auto-rendering React Component
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 demo on jsbin.com
You can also use this module with Preact: