React service injector

service_injector.tsx

import * as React from "react"

const createServicesContext = <
  Services extends Record<string, any>
>(): React.Context<Services> => {
  return React.createContext<Services>({} as Services)
}

type ServicesInjector<S extends Record<string, any>> = {
  ServicesProvider: ({
    children,
    services
  }: React.PropsWithChildren<{ services: S }>) => JSX.Element
  useService: <ServiceName extends keyof S>(
    serviceName: ServiceName
  ) => S[ServiceName]
}

export const makeServicesInjector = <
  S extends Record<string, any>
>(): ServicesInjector<S> => {
  const ServiceContext = createServicesContext<S>()

  const useService = <ServiceName extends keyof S>(
    serviceName: ServiceName
  ): S[ServiceName] => {
    return React.useContext(ServiceContext)[serviceName]
  }

  const ServicesProvider = ({
    children,
    services
  }: React.PropsWithChildren<{ services: S }>): JSX.Element => {
    return (
      <ServiceContext.Provider value={services}>
        {children}
      </ServiceContext.Provider>
    )
  }

  return {
    ServicesProvider,
    useService
  }
}