← All examplesState / live

Dependency injection

Typed service tokens, factories and parent/child containers.

01 / Live preview● Interactive
Interact with the component. The source on the right is the actual code.
Zidom JS / Example sourceREAD ONLY
src›demos›di.tsx
di.tsx
●  Zidom
import { signal, onCleanup } from '@zidomjs/core';import { createContainer, createToken } from '@zidomjs/di';interface GreetingService {  hello(name: string): string;}const GREETING = createToken<GreetingService>('greeting');export default function DependencyInjectionDemo() {  const root = createContainer();  root.registerFactory(GREETING, () => ({    hello: name => `Hello, ${name}!`  }));  const child = root.createChild();  onCleanup(() => {    child.dispose();    root.dispose();  });  const result = signal(child.get(GREETING).hello('Zidom'));  return (    <div className="example-card">      <p>Child containers resolve services registered by a parent.</p>      <p className="demo-output">{result}</p>      <button        onClick={() => (result.value = child.get(GREETING).hello('Zidane'))}      >        Resolve greeting      </button>    </div>  );}
● zidom / diTSX · UTF-8 · Copyable source

This website demo runs pinned Zidom beta.1 packages; the latest framework release is beta.2. See release details and limitations. Report a problem with this example.