@equipo.nutrix/ioc

React IOC Components

Install

npm install --save @equipo.nutrix/ioc

yarn add @equipo.nutrix/ioc

Usage

import React, { FC } from 'react';
import { injectable, Container } from 'inversify';
import {
  ContainerProvider,
  ContainerReducer,
  combineContainers,
  useInjection
} from '@equipo.nutrix/ioc';


// Define Symbols for IOC
const TYPES = {
  Add: Symbol.for("Add")
}


interface Add {
  add(a: number, b: number): number
}

@injectable()
class AddImplementation implements Add {
  add(a: number, b: number): number {
    return a + b;
  }
}

const addContainerReducer: ContainerReducer = (container: Container) => {
  container.bind<Add>(TYPES.Add).to(AddImplementation);

  return container;
}

const AddsTo4: FC = () => {
  const addImp = useInjection<Add>(TYPES.Add);

  return (
    <div>
      The answer is: {addImp.add(2, 2)}
    </div>
  )
}

const App: FC = () => {
  const container = combineContainers(addContainerReducer);

  return (
    <ContainerProvider container={container}>
      <header>
        <h3>How much is 2 + 2?</h3>
      </header>
      <AddsTo4 />
    </ContainerProvider>
  )
}

License

MIT ©