React IoC
Hierarchical Dependency Injection for React
Features
- Hierarchical Dependency Injection
- Can inject dependencies using React Hooks
- Automatically calls
.dispose()on created class instances when React unmountProvidercomponent - Can work without decorators
- Supports lazy service registration with code splitting
- ES6, CommonJS and UMD bundles
- Declarations for TypeScript and Flow
- Type Safe even in JavaScript (with TypeScript
--checkJsmode) - Tiny: only 1.1 KB (min+gzip)
Requirements: React 16.6 or greater, ES6 Map or Map polyfill.
Documentation
- @provider class decorator or HOC
- toClass binding
- toValue binding
- toFactory binding
- toExisting binding
- @registerIn class decorator
- @inject property decorator
- inject utility function
- useInstance React Hook
Example
import React from "react";
import { provider, inject } from "react-ioc"
import { observable, 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;
}
}
@observer
class PostEditor extends React.Component {
@inject postService: PostService;
render() {
// ...
}
}
@provider(DataContext, PostService)
class App extends React.Component {
render() {
// ...
}
}@provider (alias @Provider)
HOC (or decorator) that registers dependencies in scope of wrapped component.
import { provider, toClass, toFactory, toValue, toExisting } from "react-ioc";
@provider(
DataContext, // bind DataContext to self
[IFooService, FooService] // bind IFooService to FooService
[IBarService, toClass(BarService)] // bind IBarService to BarService
[IBazService, toValue({ baz: 123 })] // bind IBazService to static value
// bind MobxStore to factory with dependencies
[MobxStore, toFactory(
[IFooService, IBarService],
(fooService, barService) => MobxStore.create(fooService, barService)
)]
// bind IObsoleteService to already registered IFooService instance
[IObsoleteService, toExisting(IFooService)],
)
class App extends React.Component {
render() {
// ...
}
}Providers can be nested:
@provider(DataContext, AuthService)
class App extends React.Component {
render() {
// ...
}
}
@provider(UserService)
class HomePage extends React.Component {
render() {
// ...
}
}Also Provider component has static register() function, for imperative dependencies registration:
// App.jsx
import { provider, toClass } from "react-ioc";
class App extends React.Component {}
export default provider()(App);// somewhere else
import App from "./App";
App.register(FooService, [BarService, toClass(BarService)]);@registerIn (alias @RegisterIn)
Class decorator for lazy service registration in Provider. Accepts lambda that returns some Proveider component.
// ./services/LazyService.js
import { registerIn } from "react-ioc";
import App from "../components/App";
@registerIn(() => App)
export class LazyService {}// ./components/LazyWidget.jsx
import { inject } from "react-ioc";
import { LazyService } from "../services/LazyService";
export default class LazyWidget extends React.Component {
@inject lazyService: LazyService;
}// ./components/App.jsx
import { provider } from "react-ioc";
const LazyWidget = React.lazy(() => import("./LazyWidget"));
@provider()
export default class App extends React.Component {
render() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyWidget />
</React.Suspense>
);
}
}Also, is can accept binding as second argument:
// ./services/LazyService.js
import { registerIn, toClass } from "react-ioc";
import App from "../components/App";
interface LazyService {
method(): void;
}
class LazyServiceImpl implements LazyService {
// ...
}
@registerIn(() => App, toClass(LazyServiceImpl))
export class LazyService {}@inject (alias @Inject)
Property decorator for property dependency injection.
Can use dependency types from Reflect Metadata (with TypeScript --emitDecoratorMetadata):
import { inject } from "react-ioc";
class FooService {
@inject barService: BarService;
}
class MyComponent extends React.Component {
@inject fooService: FooService;
@inject barService: BarService;
// ...
}Or manually specified dependencies:
import { inject } from "react-ioc";
class FooService {
@inject(BarService) barService;
}
class MyComponent extends React.Component {
@inject(FooService) fooService;
@inject(BarService) barService;
// ...
}If you want to use dependency in React.Component constructor you should pass context argument to super():
import React from "react";
import { inject } from "react-ioc";
class MyComponent extends React.Component {
@inject fooService: FooService;
constructor(props, context) {
super(props, context);
this.fooService.doSomething();
}
}inject
Utility function for property or constructor dependency injection. Note, that for React Components we should explicitely define static contextType = InjectorContext (unlike with @inject decorator).
Property Injection:
import { inject, InjectorContext } from "react-ioc";
class FooService {
barService = inject(this, BarService);
}
class MyComponent extends React.Component {
fooService = inject(this, FooService);
barService = inject(this, BarService);
static contextType = InjectorContext;
}Constructor Injection:
import { inject } from "react-ioc";
class OtherService {
constructor(fooService, barService) {
this.fooService = fooService || inject(this, FooService);
this.barService = barService || inject(this, BarSerivce);
}
}useInstance React Hook
import { useInstance, useInstances } from "react-ioc";
const MyButton = props => {
const myService = useInstance(MyService);
return <button onClick={() => myService.doSomething()}>Ok</button>
}
const MyWidget = props => {
const [fooService, barService] = useInstances(FooService, BarService);
return <div><MyButton /></div>
}Usage
> npm install --save react-ioc
UMD build
<script crossorigin src="https://unpkg.com/react-ioc/dist/index.umd.min.js"></script>const { provider, inject } = window.ReactIoC;