lifecyclemixin

Fire React lifecycle events on your Backbone models, collections and views.

Installation

$ npm install --save lifecyclemixin

Methods

lifecyclemixin searches your state for Backbone objects and automatically binds the events. Use these methods for models outside your state.

@addLifecycleListener(foo: Backbone.Model)

@removeLifecycleListener(foo: Backbone.Model)

Usage

var React = require('react');
var Backbone = require('backbone');
var lifecyclemixin = require('lifecyclemixin');

var Model = Backbone.Model.extend({
    initialize: function() {
        this.on('componentWillMount', this.componentWillMount, this);
    },
    componentWillMount: function() {
        console.log('My parent component is about to mount');
    }
});

var myModel = new Model();
var Component = React.createClass({
    mixins: [lifecyclemixin],
    getInitialState: function() {
        return {
            model: new Model()
        };
    },
    componentWillMount: function() {
        this.addLifecycleListener(myModel);
    },
    componentWillUnmount: function() {
        this.removeLifecycleListener(myModel);
    },
    render: function() {
        return <div> Hello World </div>;
    }
});