@servicetitan/react-ioc v30.3.0

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 --save

Documentation

• inject

• injectable

• Container

• Provide

• provider

• injectDependency

@inject

Alias for @inject from InversifyJS.

@injectable

Alias for @injectable from InversifyJS.

Container

Alias for Container from InversifyJS.

@provide

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

useDependencies

A Hook that can be used in order to consume IoC container in stateless components.

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, injectDependency} from '@servicetitan/react-ioc';

@provide({
    singletons: [MySpecialStore]
})
class MySpecialComponent extends React.Component {
    render() {
        return <MySpecialSubComponent />;
    }
}

• 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;

    render() {
        return (
            <span>
                {this.mySpecialStore.mySpecialValue}
            </span>
        );
    }
}

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

class MySpecialConsumerStore {
    private mySpecialStore: MySpecialStore;

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

• Accessing container inside React FC.

// with useDependencies hook
const MySpecialSFC = (props) => {
    const [ mySpecialStore ] = useDependencies(MySpecialStore);
    return (
        <div>
            {mySpecialStore.mySpecialValue}
        </div>
    );
};

Using tokens.

Creating a token

// logger.tsx

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

export interface ILogger {
    error(e: Error): void;
}

export const LOGGER_TOKEN = symbolToken<ILogger>('LOGGER_TOKEN');

// injectLoggerDependency decorator
export const injectLoggerDependency = injectDependency(LOGGER_TOKEN);

// provideLogger HOC
export function provideLogger(Logger: interfaces.Newable<ILogger>) {
    return provide({ singletons: [{ provide: LOGGER_TOKEN, useClass: Logger }] });
}

Injecting a service by token

// error-boundary.tsx

import { injectLoggerDependency, ILogger } from './logger'

class ErrorBoundary extends React.Component {
    state = { hasError: false };
    
    @injectLoggerDependency
    logger!: ILogger;
    
    componentDidCatch(e: Error) {
        this.logger.error(e);
        this.setState({ hasError: true });
    }
    
    render() {
        if (this.state.hasError) {
            return (
                <div>Something went wrong...</div>
            );
        }
        
        return this.props.children;
    }
}

Providing a service

// app.tsx

import { ILogger, provideLogger } from './logger';
import { ErrorBoundary } from './error-boundary';

class Logger implements ILogger {
    error(e: Error) {
        console.log(e);
    }
}

const App = provideLogger(Logger)(() => (
    <ErrorBoundary>
        <Router />
    </ErrorBoundary>
));