Skip to content

Latest commit

 

History

History
71 lines (55 loc) · 1.91 KB

readme-in-es5.md

File metadata and controls

71 lines (55 loc) · 1.91 KB

ReactHabitat comes with a createBootstrapper method for our es5 users.

var ReactHabitat = require('react-habitat');
var SomeReactComponent = require('./SomeReactComponent');
var AnotherReactComponent = require('./AnotherReactComponent');

function MyApp() {

  // Create a new react habitat bootstrapper
  this.domContainer = ReactHabitat.createBootstrapper({

    // default options (optional)
    defaultOptions: {
        tag: 'div',                 // (Optional)
        className: 'myHabitat',     // (Optional)
        replaceDisabled: false      // (Optional)
    },

    // Create a new container (Required)
    container: [

      // Register your top level component(s)
      {register: 'SomeReactComponent', for: SomeReactComponent},
      {register: 'AnotherReactComponent', for: AnotherReactComponent},
      
      // Register a dynamic import
      {register: 'AsyncReactComponent', forAsync: function() { 
        return new Promise((resolve) => {
            require.ensure(['./components/MyComponent'], () => {
                resolve(require('./components/MyComponent'));
            });
          })
        }
      }
    ],

    // Should update lifecycle event (Optional) 
    // return false to cancel update
    shouldUpdate: function(target, query) {
        return true;
    },

    // Will update lifecycle event (Optional) 
    willUpdate: function(target, query) {
    },

    // Did update lifecycle event (Optional)
    didUpdate: function(target) {
    },
    
    // Will unmount habitats lifecycle event (Optional)
    willUnmountHabitats: function() {
    },
    
    // Did unmount habitats lifecycle event (Optional)
    didUnmountHabitats: function() {
    },

    // Did dispose lifecycle event (Optional)
    didDispose: function() {
    },

  });
}

// Always export a 'new' instance so it immediately evokes
exports.MyApp = new MyApp();

Read the Full spec here.