All Projects → gnaeus → React Ioc

gnaeus / React Ioc

Licence: mit
Hierarchical Dependency Injection with new React 16 Context API

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to React Ioc

Ioc
🦄 lightweight (<1kb) inversion of control javascript library for dependency injection written in typescript
Stars: ✭ 171 (+28.57%)
Mutual labels:  decorators, dependency-injection, ioc, ioc-container, inversion-of-control
Kangaru
🦘 A dependency injection container for C++11, C++14 and later
Stars: ✭ 297 (+123.31%)
Mutual labels:  dependency-injection, ioc, injection, ioc-container, inversion-of-control
vesselize
⛵ A JavaScript IoC container that works seamlessly with Vue.js and React.
Stars: ✭ 22 (-83.46%)
Mutual labels:  ioc, dependency-injection, injection, inversion-of-control, ioc-container
Poodinis
A dependency injection framework for D with support for autowiring.
Stars: ✭ 57 (-57.14%)
Mutual labels:  dependency-injection, ioc, injection, ioc-container
Typhoon
Powerful dependency injection for Objective-C ✨✨ (https://PILGRIM.PH is the pure Swift successor to Typhoon!!)✨✨
Stars: ✭ 2,711 (+1938.35%)
Mutual labels:  dependency-injection, ioc, ioc-container, inversion-of-control
Singularity
A extremely fast ioc container for high performance applications
Stars: ✭ 63 (-52.63%)
Mutual labels:  dependency-injection, ioc, ioc-container, inversion-of-control
iocgo
A lightweight Inversion of Control (IoC) (Dependency Injection) container for Golang
Stars: ✭ 36 (-72.93%)
Mutual labels:  ioc, dependency-injection, inversion-of-control, ioc-container
DependencyInjector
Lightweight dependency injector
Stars: ✭ 30 (-77.44%)
Mutual labels:  ioc, dependency-injection, injection, ioc-container
Typescript Ioc
A Lightweight annotation-based dependency injection container for typescript.
Stars: ✭ 427 (+221.05%)
Mutual labels:  decorators, dependency-injection, ioc, ioc-container
Container Ioc
Inversion of Control container & Dependency Injection for Javascript and Node.js apps powered by Typescript.
Stars: ✭ 89 (-33.08%)
Mutual labels:  dependency-injection, ioc, injection, inversion-of-control
Reflex
Minimal dependency injection framework for Unity
Stars: ✭ 263 (+97.74%)
Mutual labels:  ioc, dependency-injection, injection, ioc-container
ThunderboltIoc
One of the very first IoC frameworks for .Net that has no reflection. An IoC that casts its services before thunder casts its bolts.
Stars: ✭ 40 (-69.92%)
Mutual labels:  ioc, dependency-injection, inversion-of-control, ioc-container
alpha-dic
Powerful dependency injection container for node.js
Stars: ✭ 27 (-79.7%)
Mutual labels:  ioc, dependency-injection, ioc-container
fusion
A simple automated dependency injection library for TypeScript, supporting React class and functional components.
Stars: ✭ 18 (-86.47%)
Mutual labels:  ioc, dependency-injection, injection
diod
A very opinionated inversion of control (IoC) container and dependency injector for Typescript, Node.js or browser apps.
Stars: ✭ 36 (-72.93%)
Mutual labels:  ioc, dependency-injection, inversion-of-control
tsioc
AOP, Ioc container, Boot framework, unit testing framework , activities workflow framework.
Stars: ✭ 15 (-88.72%)
Mutual labels:  ioc, decorators, ioc-container
granitic
Web/micro-services and IoC framework for Golang developers
Stars: ✭ 32 (-75.94%)
Mutual labels:  ioc, dependency-injection, inversion-of-control
Tsed
📐 Ts.ED is a Node.js and TypeScript framework on top of Express to write your application with TypeScript (or ES6). It provides a lot of decorators and guideline to make your code more readable and less error-prone.
Stars: ✭ 1,941 (+1359.4%)
Mutual labels:  decorators, dependency-injection, ioc
Zenject-2019
Dependency Injection Framework for Unity3D
Stars: ✭ 2,567 (+1830.08%)
Mutual labels:  ioc, dependency-injection, injection
pythondi
Python lightweight dependency injection library
Stars: ✭ 26 (-80.45%)
Mutual labels:  dependency-injection, inversion-of-control, ioc-container

React IoC

Hierarchical Dependency Injection for React

Build Status Coverage Status GitHub license npm version

Features

  • Hierarchical Dependency Injection
  • Can inject dependencies using React Hooks
  • Automatically calls .dispose() on created class instances when React unmount Provider component
  • 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 --checkJs mode)
  • Tiny: only 1.1 KB (min+gzip)

Requirements: React 16.6 or greater, ES6 Map or Map polyfill.

Documentation

arch

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)]);

▲ back to top ▲

@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 {}

▲ back to top ▲

@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();
  }
}

▲ back to top ▲

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);
  }
}

▲ back to top ▲

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

▲ back to top ▲

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;
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].