inversify-hooks

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.

{ "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.