Package Exports

react-ioc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ioc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React IOC

Hierarchical Dependency Injection for React

Features

Hierarchical Injection
Can inject ES6 classes and React components
Automatically calls .dispose() on created class instances when Reat unmouts Provider component
Supports both new and legacy React Context API
ES6, CommonJS and UMD bundles
Declarations for TypeScript and Flow
Type Safe even in JavaScript (with TypeScript --checkJs mode)
Tiny: only 2 KB (min+gzip)

Example

import React, { Component } from "react";
import { provider, consumer, inject } from "react-ioc"
import { obserbvable, action } from "mobx";
import { observer } from "mobx-react";

class DataContext {
  users = observable.map<number, User>();
  posts = observable.map<number, Post>();
}

class PostService {
  @inject dataContext: DataContext;

  @action
  createPost(user: User) {
    const post = new Post({ id: uniqueId() });
    this.dataContext.posts.set(post.id, post);
    return post;
  }
}

@consumer
@observer
class PostEditor extends Component {
  @inject postService: PostService;

  render() {
    // ...
  }
}

@provider(DataContext, PostService)
class App extends Component {
  render() {
    // ...
  }
}

@Provider (alias @provider)

TODO

@Consumer (alias @consumer)

TODO

@Inject (alias @inject)

TODO

getFunction

TODO

getInstance

TODO

createInstance

TODO

Usage

> npm install --save react-ioc

Requirements: IE9+, ES6 Map polyfill (like for React).

UMD build

<script crossorigin src="https://unpkg.com/react-ioc/dist/index.umd.min.js"></script>

const { Provider, Consumer, getFunction, getInstance } = window.ReactIOC;