InversifyJS with React Hooks, listing 1

Hello.tsx

import React from 'react';
import { useInjection } from './ioc.react';
import { IProvider } from './providers';

export const Hello: React.FC = () => {
    const provider: IProvider<string>; // here we need to inject our provider

    return (
        <h1>Hello {provider.provide()}!</h1>
    );
}; 

index.tsx

import 'reflect-metadata';
import React from 'react';
import ReactDOM from 'react-dom';
import { Hello } from './Hello';
import { container } from './ioc';

const App: React.FC = () => {
    return (
        <div>
            <Hello />
        </div>
    );
}; 

ReactDOM.render(<App />, document.getElementById('root'));

ioc.ts

import { Container } from 'inversify';
import { IProvider, NameProvider } from './providers';

export const container = new Container();
container.bind<IProvider<string>>('nameProvider').to(NameProvider);

providers.ts

import { injectable } from 'inversify';

export interface IProvider<T> {
  provide(): T;
}

@injectable()
export class NameProvider implements IProvider<string> {
  provide() {
    return 'World';
  }
}