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');
}
⚠️ Important! inversify-hooks requires TypeScript >= 2.0 and the
experimentalDecorators
,emitDecoratorMetadata
,types
andlib
compilation options in yourtsconfig.json
file.
"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.