React Hooks for injection-js

Overview

React Hooks for injection-js

build codecov

React Hooks for injection-js.

Get Started

npm install use-inject

Online Demo

import * as React from 'react';
import { Injectable } from 'injection-js';
import { useInject, DIContainer } from 'use-inject';
import 'reflect-metadata';

abstract class LogService {
  name: string;
}

@Injectable()
class LogServiceOneImpl implements LogService {
  name = 'log-one';
}

@Injectable()
class LogServiceTwoImpl implements LogService {
  name = 'log-two';
}

@Injectable()
class ClientService {
  public name: string;
  constructor(private logService: LogService) {
    this.name = `client-with-${this.logService.name}`;
  }
}

function Component() {
  const name = useInject(ClientService).name;
  return <div>{name}</div>;
}

export default function App() {
  return (
    <div>
      <DIContainer
        providers={[
          ClientService,
          { provide: LogService, useClass: LogServiceOneImpl },
        ]}
      >
        <Component></Component>
      </DIContainer>
      <DIContainer
        providers={[
          ClientService,
          { provide: LogService, useClass: LogServiceTwoImpl },
        ]}
      >
        <Component></Component>
      </DIContainer>
    </div>
  );
}

License

MIT

You might also like...
Lightweight React bindings for MobX based on React 16.8 and Hooks

mobx-react-lite 🚨 🚨 🚨 This repo has been moved to mobx This is a lighter version of mobx-react which supports React functional components only and

A delightful modal dialog component for React, built from the ground up to support React Hooks.
A delightful modal dialog component for React, built from the ground up to support React Hooks.

🦞 modali A delightful modal dialog library for React, built from the ground up to support React Hooks. Modali provides a simple interface to build be

React Redux binding with React Hooks and Proxy
React Redux binding with React Hooks and Proxy

There are several projects related to this repo. Here's the index of those. reactive-react-redux v5-alpha (this repo): This has an experimental react-

📋 React Hooks for forms validation (Web + React Native)
📋 React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation. English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Рус

react-pirate React lifecycle and utilities hooks.

🏴‍☠️ React Pirate Hooks for React 16.7 and above. Arrrr. Installation With npm: npm install react-pirate With yarn: yarn add react-pirate Usage Uti

Super Simple React Hooks for react-redux.

RRH What's this? Simple React Hooks of React Redux Dependencies You must install some dependent packages before use RHH. react redux Install npm npm i

@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility in mind.
A small package of custom React hooks that are useful for debugging changes in React hook dependencies across renders

use-debugger-hooks This is a package of custom React hooks that are useful for debugging dependency changes between renders. Most act as drop in repla

React hooks for generating QR code for your next React apps.

React hooks for generating QR code for your next React apps.

Owner
Yadong Xie
I remember I was here not because the way in front of me, but the way behind me. NG-ZORRO Creator / Google Developer Expert / Apache Committer
Yadong Xie
👩‍🍳 A React Hooks utility library containing popular customized hooks

React Recipes A React Hooks utility library containing popular customized hooks What's your favorite dish? npm i react-recipes --save yarn add react-r

Craig Walker 905 Sep 19, 2022
🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)

?? Nice Hooks 中文版 A lot of nice hooks to make react hooks easier to use. If you find this project is useful to you, please give me a star. Installatio

Daniel.xiao 45 May 5, 2022
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development ?? Live playground here ?? ???? English

Antonio Rù 6k Sep 22, 2022
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks

?? Advanced React Hooks ?? EpicReact.Dev Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks. W

José Gonçalves 4 Mar 15, 2022
Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Anurag 14 Sep 30, 2022
ReactJs Custom hooks, component lifecycle - Indispensable hooks

ReactJs Custom hooks, component lifecycle - Indispensable hooks

Alan Buscaglia 54 Sep 23, 2022
Travel Website is a React application that uses React Hooks and React Router for this beginner React JS Project

Travel Website is a React application that uses React Hooks and React Router for this beginner React JS Project. The website is fully responsive as well.

Leticia Lumi Nagao 3 Aug 28, 2022
React Native APIs turned into React Hooks for use in functional React components

React Native Hooks React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components. Note: Yo

React Native Community 2.9k Sep 22, 2022
React-cache-api - React Cache API is a React Hooks library for data fetching

React Cache API React Cache API is a React Hooks library for data fetching. It w

awmaker 12 Aug 31, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 175 Aug 1, 2022