Inversify Hooks

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

!GitHub last commit
!GitHub contributors

!logo

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(Service1);

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

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

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

You can also use any ID that you prefer

`
container.addSingleton(Service1, 'MyService1');

function ExampleComponent() {
const service1 = useInject('MyService1');
}
`

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

`js
{
"compilerOptions": {
"target": "es5",
"lib": ["es6"],
"types": ["reflect-metadata"],
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
``

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.