@vaaas/react-di-container

Type-safe dependency injection container for React. Instances are created lazily from registered factories on first access.

Install

npm install @vaaas/react-di-container

Usage

Create a container and register factories

import { Container } from "@vaaas/react-di-container";

class UserService {
  getUser(id: string) {
    return fetch(`/api/users/${id}`).then((r) => r.json());
  }
}

class AuthService {
  constructor(private users: UserService) {}

  async login(id: string) {
    const user = await this.users.getUser(id);
    return user;
  }
}

const container = new Container();
container.register("UserService", () => new UserService());
container.register("AuthService", (c) => new AuthService(c.get("UserService")));

Factories receive the container as an argument, allowing dependencies to resolve other dependencies.

Provide the container to your React tree

import { ContainerContext } from "@vaaas/react-di-container";

function App() {
  return (
    <ContainerContext value={container}>
      <UserProfile />
    </ContainerContext>
  );
}

Consume instances in components

import { useInstance } from "@vaaas/react-di-container";

function UserProfile() {
  const auth = useInstance<AuthService>("AuthService");

  // use auth...
}

useInstance resolves the instance lazily on first call and returns the cached singleton thereafter.

Direct container access

import { useContainer } from "@vaaas/react-di-container";

function MyComponent() {
  const container = useContainer();
  const service = container.get<MyService>("MyService");
}