useRimitiveContext() function

Home > @rimitive/react > useRimitiveContext

useRimitiveContext() function

Create a Rimitive context with modules that is scoped to the component lifecycle. The context will be automatically disposed when the component unmounts.

Signature:

export declare function useRimitiveContext<M extends Module[]>(...modules: M): Use<ComposedContext<M>>;

Parameters

Parameter	Type	Description
modules	M	The Rimitive modules to include in the context

Returns:

Use<ComposedContext<M>>

A Use context with implementations from all provided modules

Example 1

import { SignalModule, ComputedModule, EffectModule } from '@rimitive/signals/extend';

function App() {
  // Create a context with specific modules
  const use = useRimitiveContext(SignalModule, ComputedModule, EffectModule);

  const count = useRef(use.signal(0));
  const doubled = useRef(use.computed(() => count.current() * 2));

  return <div>...</div>;
}

Example 2

// For simpler cases, you can use compose directly in a ref
import { compose } from '@rimitive/core';
import { SignalModule, ComputedModule, EffectModule } from '@rimitive/signals/extend';

function TodoApp() {
  const svc = useRef(compose(SignalModule, ComputedModule, EffectModule));
  const { signal } = svc.current;

  const todos = useRef(signal([]));
  const filter = useRef(signal('all'));

  // Dispose on unmount
  useEffect(() => () => svc.current.dispose(), []);

  return (
    <AppContext.Provider value={{ todos: todos.current, filter: filter.current }}>
      <TodoList />
    </AppContext.Provider>
  );
}