Skip to content
Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Nov 22, 2019
dist Update version Feb 15, 2020
examples/react-example update inversify-props Nov 10, 2019
src Update version Feb 15, 2020
.editorconfig Update version Feb 15, 2020
.gitignore Add react example with hooks Mar 10, 2019
.npmignore Include src in package Aug 19, 2019
.prettierrc.js Update version Feb 15, 2020
LICENSE Init Mar 10, 2019
README.md Update dependencies Nov 14, 2019
package-lock.json Update version Feb 15, 2020
package.json Update version Feb 15, 2020

README.md

Inversify Hooks

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

GitHub last commit GitHub license GitHub forks GitHub contributors GitHub issues

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

You can’t perform that action at this time.