Service Provider

A React component library for dependency injection in your app.

It provides a simple, React-friendly way to inject and consume services throughout your component tree.

What is a Service?

A Service is any object encapsulating logic separate from your UI — for example:

• Communicating with your backend API
• Wrapping third-party hooks or libraries
• Managing global state or utilities

How to Use

1. Define a Service Contract (Interface)

Define the interface your app depends on.
By coding against an interface, you can swap implementations without changing your app’s code.

import { Service } from "./Service";

interface ApiService extends Service {
  getRequest(endpoint: string): string;
  useHook: () => void; // You can even inject hooks!
}

namespace ApiService {
  export const id = Symbol.for("ApiService");
}

export default ApiService;

2. Create a Concrete Service Implementation

Implement the interface for a specific environment or use case.

import ApiService from "./ApiService";

export default class ApiServiceDev implements ApiService {
  serviceId = ApiService.id;

  getRequest(endpoint: string): string {
    return `You hit ${endpoint}`;
  }

  useHook = () => useYourHook();
}

3. Inject Services in Your App

Create a list of service instances (usually in a services/index.ts), then provide them to your app using the ServiceProvider.

import ApiServiceDev from "./services/ApiServiceDev";
import { ServiceProvider } from "./index";

const services = [new ApiServiceDev()];

const App = () => (
  <ServiceProvider value={services}>{/* ...your app */}</ServiceProvider>
);

4. Consume Services with useService

Use the useService hook to access any injected service by its ID.

import { useService } from "./index";

const Component = () => {
  const { getRequest } = useService<ApiService>(ApiService.id);

  return <div>{getRequest("some/endpoint")}</div>;
};