Inversify Hooks

This package is a wrapper of inversify-props to simplify how inject your dependencies in components with hooks.

Installation

$ npm install inversify-hooks reflect-metadata --save

The inversify-hooks type definitions are included in the inversify-hooks npm package.

How to use

import 'reflect-metadata'; // Import only once
import { container, useInject } from 'inversify-hooks';

container.addSingleton<IService1>(Service1);

function ExampleComponent() {
  const [service1] = useInject<IService1>(cid.IService1);

  useEffect(() => {
    if (!service1) {
      return;
    }

    service1.asyncMethod();
  }, [])
}

You can also use any ID that you prefer

container.addSingleton<IService1>(Service1, 'MyService1');

function ExampleComponent() {
  const service1 = useInject<IService1>('MyService1');
}

:warning: Important! inversify-hooks requires TypeScript >= 2.0 and the experimentalDecorators, emitDecoratorMetadata, types and lib compilation options in your tsconfig.json file.

1{
2    "compilerOptions": {
3        "target": "es5",
4        "lib": ["es6"],
5        "types": ["reflect-metadata"],
6        "module": "commonjs",
7        "moduleResolution": "node",
8        "experimentalDecorators": true,
9        "emitDecoratorMetadata": true
10    }
11}

How to test

There are more examples of how to test in inversify-props

More examples

There are more examples of how to use the container in services or other components in inversify-props

Why we made this package

You can learn more about why we made this packages in the original repo.

How register a dependency

If you're not familizared of how to register dependencies, check the docs.

How to configure Uglify or Terser

f you're using Uglify or Terser you need to configure well the plugin, check the docs.