Service locator injector example

locator-example.tsx

import { FC, createContext } from "react";

// Service locator:

interface IService {
  test: () => string;
}

type ServiceLocator = {
  myTestService: IService;
};

const serviceLocator: ServiceLocator = {
  myTestService: { test: () => "hello world" },
};

// Context

const ctx = createContext(serviceLocator);

// HOC

const WithServiceLocator = <TProps extends {}>(
    Child: React.ComponentType<TProps>
  ) => (props: Omit<TProps, keyof ServiceLocator>) => (
    <>
      <ctx.Consumer>
        {(ctx) => <Child {...ctx} {...(props as TProps)} />}
      </ctx.Consumer>
    </>
  );

// Component

type TestProps = {
  myTestService: IService;
  someData: string;
};

const MyComponent: FC<TestProps> = ({ myTestService }) => (
  <>{myTestService.test()}</>
);

const ComponentWithService = WithServiceLocator(MyComponent);

// Application

const App: FC = () => (
  <div>
    <ComponentWithService someData="test data" />
  </div>
);