https://github.com/beanworks/React.withBackbone

React Backbone Binding that works with React 16
https://github.com/beanworks/React.withBackbone

Last synced: about 1 month ago
JSON representation

React Backbone Binding that works with React 16

• Host: GitHub
• URL: https://github.com/beanworks/React.withBackbone
• Owner: beanworks
• License: bsd-3-clause
• Created: 2017-05-16T01:05:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-18T06:29:06.000Z (over 7 years ago)
• Last Synced: 2024-04-26T00:08:15.344Z (8 months ago)
• Language: JavaScript
• Homepage: https://beanworks.github.io/React.withBackbone/
• Size: 25.4 KB
• Stars: 2
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react - React.withBackbone - React 16 ready backbone binding

README

        
# WithBackbone

**React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16)**

[![NPM](https://nodei.co/npm/with-backbone.png)](https://nodei.co/npm/with-backbone/)

[![Code Climate](https://codeclimate.com/github/beanworks/React.withBackbone/badges/gpa.svg)](https://codeclimate.com/github/beanworks/React.withBackbone)

[![Test Coverage](https://codeclimate.com/github/beanworks/React.withBackbone/badges/coverage.svg)](https://codeclimate.com/github/beanworks/React.withBackbone/coverage)

![CI Status](https://travis-ci.org/beanworks/React.withBackbone.svg?branch=master)

## Why did we make it

There are already a couple of mixins or components that will link you Backbone model or collection with React, but with the introduction of [React Fiber (16.0)](https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html), the `React.createClass` syntax will be deprecated which would suggest mixins are no longer a way to go, thus we've reinvented the wheel once again and created *withBackbone*.

## How does it work

The [higher order component](https://facebook.github.io/react/docs/higher-order-components.html) will loop through the props you passed in, and for each of those props who are either backbone model or backbone collection, it will be listen to certain events and `forceUpdate` if the events are triggered. Here is a table that summerizes the events that will trigger a `forceUpdate`:

| Backbone | Events |

| --- | --- |

| Model | Change|

| Collection | Add, Remove, Sort, Reset|

## To install 

``` npm install with-backbone```

## To Use In Code

```javascript

   import withBackbone from 'withBackbone';

   ...

   

   class TestClass extends React.Components {

   

    render () {

        return something that renders a backbone model or collection in props, for example user

     }

   }

   

   TestClass.PropTypes = {

      "User": PropTypes.instanceOf(Backbone.Model)

   }

   

   export default withBackbone(TestClass);

```

Now when your user changes, the view component re-render.