di.js + React ES6 Classes + Decorators

example.js

import React from 'react';
import Navigation from 'components/navigation/Navigation';
import ComponentInject from 'injection/ComponentInject';
import DomoFooterLogo from './DomoFooterLogo';

@ComponentInject({
  'Navigation': Navigation,
  'DomoFooterLogo': DomoFooterLogo
})
class AppHandler extends React.Component {
  render() {
    return (
      <div style={{marginTop: this.props.Navigation.HEIGHTS.BREADCRUMB}}>
        <this.props.Navigation />
        {this.props.children}
        <this.props.DomoFooterLogo />
      </div>
    );
  }
};


export default AppHandler;

Explanation.md

@ComponentInject({ ... })

So I got this API working with latest babel & React. It is a decorator which takes an object literal, the values of which are tokens that ought to be replaced by the dependency injector, the keys being what you would reference on this.props. It works by replacing the react component with an anonymous class which is annotated with the required dependencies. The instance of this class is a higher order component which renders the target component with the required dependencies merged onto this.props.

Looks cool dude. I'm keeping track of what you're doing with this frankenstein framework. Loving it. Keep sharing!

This is just pretty :)