A toolkit for transforming Backbone views to React components and vice versa. 🚀
$ npm install --save-dev backbone.react-bridge
This function allows you to get a Backbone.View from a React component. It accepts as input a React Component instance or class along with some extra options.
Full blown example with available options:
constfooView=ReactBridge.viewFromComponent(FooComponent,{// Provide a model for the Backbone.Viewmodel: fooModel,// Provide a collection for the Backbone.Viewcollection: fooCollection,// By default the view gets re-rendered// on model "change" and collection "add remove reset" events// But you can override this using the `observe` propertyobserve: {model: 'change',collection: 'reset add remove'},// Define custom properties which will be passed to the React Component.// In case that the properties overlap with the model attributes,// the values of the model will be ovewritten.props: {title: 'Foo Title',subtitle: 'Foo Subtitle'},// Customize the form of the properties which will be passed to the// React Component. In case that 'getProps' is undefined, a composition// of the model's attributes, the collection's values and the custom// properties will be returned to the React Component.// `getProps` receives an object with `model` and `collection` as properties.getProps({collection, model}){return{titles: collection.map((m)=>{title: m.get('title').toUpperCase()}),content: model.get('content')}}});fooView.render();// Or if using Marionette.jsregion.show(fooView);None of the options described above are required in order to use the viewFromComponent function.
This function allows you to get a React component from a Backbone view. It accepts either a Backbone.View instance or class along with some extra options.
Full blown example with available options:
constBar=ReactBridge.componentFromView(BarView,{// Override the default tagName of the element which will wrap// the React Component. If not provided, the default tagName// according to Backbone will be usedtagName: 'ul',// Add a custom class on the element which will wrap the React ComponentclassName: 'barClass',// Using Redux? We got you covered!// You can define actions that will be dispatched when// specific events are triggered from the Backbone View.// This feature requires a reference of the store's dispatch functioneventsToActions : {// Dispatch a "BAR_SUBMIT" action when a "submit" event is triggered by the view'submit': ()=>({type: 'BAR_SUBMIT'})}// A reference to the Redux store's dispatch function. This function is// used to dispatch the actions registered via the eventToActions optiondispatch: store.dispatch});ReactDOM.render(<Bar/>,document.querySelector('#bar'));None of the options described above are required in order to use the componentFromView function.
$ npm install
$ npm start
Enjoy! 😊
$ npm run build
$ npm run coverage