import { createContext, useContext, ReactNode, FC } from "react"; type ServiceContextReturn = { [K in `${N}Provider`]: FC<{ children: ReactNode }>; } & { [K in `use${N}`]: () => T; }; export function createServiceContext( serviceName: N, getServiceInstance: () => T, ): ServiceContextReturn { const ServiceContext = createContext(undefined); const Provider: FC<{ children: ReactNode }> = ({ children }) => ( {children} ); const useService = (): T => { const context = useContext(ServiceContext); if (context === undefined) { throw new Error( `use${serviceName} must be used within a ${serviceName}Provider`, ); } return context; }; return { [`${serviceName}Provider`]: Provider, [`use${serviceName}`]: useService, } as ServiceContextReturn; }