boxed-injector-react

Dependency Injection Tools for React Applications

Installation

$ npm install --save boxed-injector-react

Overview

This is a set of helper components for leveraging the boxed-injector within a React application.

The use case for this is to pull business logic out of your components into separate testable services, and inject them into your components as props so that you can use them in multiple places. Leveraging a DI container enables automatic dependency resolution greatly simplifying application bootstrapping while making your code more declarative.

There are 2 main components.

1. Inject (Higher Order Component for resolving dependencies declaratively into React containers) - See detailed readme
2. Injectable (Wrapper around React Components for directly injecting resolved props) - See detailed readme

Installation

$ npm install --save boxed-injector-react

Getting Started

Somewhere in app bootstrapping land, leverage the commonjs module cache to gain access to a singleton of inject and register your stuff.

// injector.config.js
 
const React = require('React');
const Injector = require('boxed-injector').Injector;
const Inject = require('boxed-injector-react')(React).Inject;
 
const types = {
  FOO: 'FOO'
};
 
let inject;
 
function injectorConfig () {
  const injector = new Injector();
  injector.register(types.FOO, 'foo');
    inject = new Inject(injector);
    return injector;
};
 
injectorConfig.inject = inject;
injectorConfig.types = types;
 
module.exports = injectorConfig;

Then, in your components, reference the singleton to gain access to the injector.

// MyComponent.js
const React = require('React');
const inject = require('./injector.config').inject;
 
@inject({ 'baz': 'foo' })
class MyComponent extends React.Component {
  render(){
    console.log(this.props);
    return <div/>;
  }
}
 

Contributing

We look forward to seeing your contributions!

License

MIT © Ben Lugavere