React bindings for Vorarbeiter

Installation

npm install vorarbeiter-react

To use Vorarbeiter service container in React application pass service container into provider:

Basic usage

import React, { FC } from "react";
import { createServiceContainer, createServiceSpecBuilder, ServiceContainer } from "vorarbeiter";
import { ServiceContainerProvider } from "vorarbeiter-react";
import { ServiceImpl } from "./path/to/service/impl";
import { App } from "./path/to/app";

export const RootComponent: FC = () => {
  const sb = createServiceSpecBuilder();
  sb.set("someService", () => new ServiceImpl());
  const serviceContainer = createServiceContainer(sb.getServiceSpec());
  
  return (
    <ServiceContainerProvider serviceContainer={serviceContainer}>
      <App />
    </ServiceContainerProvider>
  );
};

Get service container inside functional component

import React, { FC } from "react";
import { useServiceContainer } from "vorarbeiter-react";
import { Service } from "./path/to/service";

const MyComponent: FC = () => {
  const serviceContainer = useServiceContainer();
  const someService: Service = serviceContainer.get("someService");
  
  return (
    <div>{someService.someFieldValue}</div>
  );
};

Get service container inside class component

import React from "react";
import { withServiceContainer } from "vorarbeiter-react";
import { Service } from "./path/to/service";

const MyComponent = withServiceContainer(class MyComponent extends React.Component {
  render() {
    const { serviceContainer } = this.props;
    const someService: Service = serviceContainer.get("someService");
    
    return (
      <div>{someService.someFieldValue}</div>
    );
  }
});