React-ioc

About

React-ioc is an implementation of InversifyJS for react applications.

It uses Context Api of React 16 to manage containers.

Features

• Supports Hierarchical Dependency Injection.

• Easy Api that supports Singleton pattern and Transient pattern.

• Support for decorator and JSX based injection.

• Automatic cleaning of injected properties on unmounting of React components.

• Written with typescript i.e. has typings.

Installation

npm i @servicetitan/react-ioc

Documentation

• Inject

• Injectable

• Container

• ContainerContext

• Provide

• WithContainer

• Provider

• InjectDependency

@inject

Alias for @inject from InversifyJS.

@injectable

Alias for @injectable from InversifyJS.

Container

Alias for Container from InversifyJS.

ContainerContext

A { provider, consumer } pair generated by React.createContext

@provide

A decorator used to inject the required information in the Provider in the current level of hierarchy.

@withContainer

A decorator that should be used in order to consume any provided values.

provider

A React SFC equivalent to @provide

Examples

• Store

import { injectable } from '@servicetitan/react-ioc';

@injectable()
export class MySpecialStore {
	public mySpecialValue: string;
	constructor() {
		this.mySpecialValue = 'My Special Text';
	}
}

• Providing Container with @provide to a component

import {provide, withContainer, injectDependency} from '@servicetitan/react-ioc';

@provide({
	singletons: [MySpecialStore]
})
class MySpecialComponent extends React.Component {
	@injectDependency(MySpecialStore)
	public mySpecialStore: MySpecialStore;
}

• Providing container with <Provider>

    <Provider singletons={[MySpecialStore]}>
        <MySpecialComponent />
    </Provider>

• Any child component can inject MySpecialStore with following syntax without using @provide

class MySpecialSubComponent extends React.Component {
	@injectDependency(MySpecialStore)
	public mySpecialStore: MySpecialStore;
}

• For a non react component, we can inject values with @inject inside the container. Like:

class MySpecialConsumerStore {
    private mySpecialStore: MySpecialStore;

    constructore(@inject(MySpecialStore) mySpecialStore: MySpecialStore) {
        this.mySpecialStore = mySpecialStore;
    }
}

• Accessing container inside React SFC.

const MySpecialSFC = () => (
    <ContainerContext.Consumer>
    {
        container => (
            <div>
                {container.get(PasswordResetStore).mySpecialValue}
            </div>
        )
    }
    </ContainerContext.Consumer>
);