npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

inversify-hooks

v2.1.6

Published

Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.

Downloads

5,642

Readme

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');
}

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