React Context Injector

Plain Dependency Injector as Context for React inspired by this post

Installation

React Content Injector works with React >= v15.0.

$ npm install --save react react-context-injector

import createContextInjector from 'react-context-injector';

const ContextInjector = createContextInjector({ ... });

Example

import createContextInjector from 'react-context-injector';
import React from 'react';
import ReactDOM from 'react-dom';
import SomeComponent from './SomeComponent';

const ContextInjector = createContextInjector({
  fooService: {
    doSomething: () => 'World!',
  },
});

ReactDOM.render(
  <ContextInjector>
    <SomeComponent>
      Hello,
    </SomeComponent>
  </ContextInjector>
);

SomeComponent.js

const SomeComponent = (props, context) => {
  const someResult = context.fooService.doSomething();

  return (
    <div>
      {props.children} {someResult}
    </div>
  );
};

SomeComponent.contextTypes = {
  barService: React.PropTypes.any,
};

Usage

createContextInjector(diContainer: object): ReactClass

Create <ContextInjector> with diContainer. Child elements of <ContextInjector> can access to some member of diContainer as context. It works like as the Dependency injection.

See example.

License

MIT