Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.
npm install inversify-hooks
$ 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
}
}
``