useViewModel hook

Provides access to an already created ViewModel instance in a Solid component.

To create a ViewModel

Use useCreateViewModel or withViewModel.

API Signature

function useViewModel<VM extends AnyViewModel>(): VM;

function useViewModel<VM extends AnyViewModel>(
  vmLookup: ViewModelLookup<VM>,
): VM;

Usage

1. Active parent (no lookup)

Requires withViewModel()

Returns the nearest active ViewModel from the Solid tree (set by withViewModel).

import { useViewModel } from "mobx-view-model-solid";

export const YourComponent = () => {
  const yourVM = useViewModel<YourVM>();
  return <span>{yourVM.id}</span>;
};

2. Lookup with ViewModelLookup

Requires ViewModelStore

Connect it with <ViewModelsProvider />.

import { useViewModel } from "mobx-view-model-solid";

export const YourComponent = () => {
  const yourVM = useViewModel<YourVM>("view-model-id");
  return <span>{yourVM.id}</span>;
};

3. Lookup by anchor component

When using anchors or connect(), pass the anchor as lookup:

import { useViewModel, withViewModel } from "mobx-view-model-solid";

const Anchor = () => null;
const MainView = withViewModel(VM, View, { anchors: [Anchor] });

const Consumer = () => {
  const model = useViewModel<VM>(Anchor);
  return <span>{model.id}</span>;
};