React IoC helper

Use any ioc library (tsyringe, inversify, @Moln/react-ioc, etc.) in react.

• Installation
• API
  • DependencyContainerContext & DependencyContainerProvider
    • Use @moln/dependency-container
    • Use tsyringe
    • Use inversify
  • injectServices HOC
  • inject()

Installation

Install by npm

npm install --save @moln/react-ioc

or install with yarn (this project is developed using yarn)

yarn add @moln/react-ioc

API

DependencyContainerContext & DependencyContainerProvider

Use @moln/dependency-container

classFoo{name='foo'}classBar{name='bar'}constcontainer=newDependencyContainer();container.registerSingleton(Foo);container.registerSingleton('MyBar',Bar);render(<DependencyContainerProvidercontainer={container}><App/></DependencyContainerProvider>,document.createElement('app'));

Use tsyringe

import{container,injectable}from"tsyringe";// For implement `ContainerInterface`container.get=container.resolve;
@injectable()classFoo{name='foo'}
@injectable()classBar{name='bar'}render(<DependencyContainerProvidercontainer={containerasContainerInterface}><App/></DependencyContainerProvider>,document.createElement('app'));

Use inversify

import{Container,injectable}from"inversify";constcontainer=newContainer();
@injectable()classFoo{name='foo'}
@injectable()classBar{name='bar'}render(<DependencyContainerProvidercontainer={containerasContainerInterface}><App/></DependencyContainerProvider>,document.createElement('app'));

injectServices HOC

typeBazProps={foo: Foo;bar: Bar};classBazComponentextendsComponent<BazProps>{render(){const{foo, bar}=this.props;return<div>hello{foo.name}!{bar.name}!</div>;}}constWrapperdBazComponent=injectServices({foo: Foo,bar: Bar,})(BazComponent);render(<DependencyContainerProvidercontainer={container}><WrapperdBazComponent/></DependencyContainerProvider>,document.createElement('app'));

// By custom factoryconstWrapperdBazComponent=injectServices((container,props)=>{return{foo: container.get(Foo),bar: porps.bar||container.get(Bar),}})(BazComponent);render(<DependencyContainerProvidercontainer={container}><WrapperdBazComponentbar={newBar}/></DependencyContainerProvider>,document.createElement('app'));

useService

constBazComponent=()=>{constfoo=useService(Foo);constbar=useService(Bar);return<div>{foo.name}{bar.name}</div>;};render(<DependencyContainerProvidercontainer={container}><BazComponent/></DependencyContainerProvider>,document.createElement('app'));

inject()

Modify your tsconfig.json to include the following settings

{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}

Add a polyfill for the Reflect API (examples below use reflect-metadata). You can use:

• reflect-metadata
• core-js (core-js/es7/reflect)
• reflection

The Reflect polyfill import should only be added once, and before DI is used:

// main.tsimport"reflect-metadata";// Your code here...

Component usage:

classFoo{name='foo'}classBar{name='bar'}// Use @moln/dependency-container demo constcontainer=newDependencyContainer();container.registerSingleton(Foo);container.registerSingleton('MyBar',Bar);classBazComponentextendsComponent{
@inject()privatefoo!: Foo;
@inject('MyBar')privatebar!: Bar;render(){return<div>hello{this.foo.name}!{this.bar.name}!</div>;}}