This package has been deprecated

Author message:

This package will no longer be maintained.

stejar-react-di

Stejar Dependency Injection / Service Manager for React Components

Table of Contents

• [Dependency Injection](#Dependency Injection)
• Installation
• Quick Start
• Best Practices
• API
• License

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

The Stejar injector system is in charge of creating objects, resolving their dependencies, and providing them to other objects as requested.

It is built using Typescript and it is meant to be used in a Typescript system.

This package allows you to inject dependencies from a Stejar ServiceManager in your React Components via a HoC (@inject) into your component's Props.

Internally, all it does is create a child / parent context containing the ServiceManager. It is almost identical with how ReactRedux @connect works.

Installation

npm install --save stejar-react-di.

Quick Start

stejar-react-di helps you manage complex dependencies graph by provide you with an IoC container for your React Components.

• install with npm install stejar-react-di
• import or require inject by

//es5
var inject = require('stejar-react-di').inject;

//es6
import { inject } from 'stejar-react-di';

• Wrap your application in a ServiceProvider component passing an instance of the ServiceManager (from stejar-di) to it:

import * as React from "react";
import {render} from "react-dom";
import {ServiceManager} from "stejar-di";
import {ServiceProvider} from "stejar-react-di";

const sm = new ServiceManager();

ReactDOM.render(
    <ServiceProvider serviceManager={sm}>
        <MyApplication />
    </ServiceProvider>
    ,
    document.getElementById("app")
);

• Define a React class that requires in its props another class:

import * as React from "react";
import {SomeClass} from "somewhere";

@inject({
    someName: SomeClass
})
class ExampleWithDep extends React.Component<any,any> {
    render() {
        console.log(this.props.someName); // this.props.someName is an instance of the SomeClass class.
    }
}

[THE DOCUMENTATION IS STILL A WORK IN PROGRESS...]