withPropsViewModel HOC

Same as withViewModel, but component props are the ViewModel payload.

You write <Page userId="1" /> instead of passing a nested payload prop.

Under the hood it is withViewModel with getPayload: (props) => props. Everything else — observer(), SSR, fallback, anchors, connect() — works the same. See withViewModel for details.

This HOC wraps your view component into observer() HOC!

Enabled by default via wrapViewsInObserver, same as withViewModel.

Signature

withPropsViewModel(ViewModelClass, ViewComponent, config?)

config is ViewModelHocConfig without getPayload.

Usage

Define payload on the ViewModel. Type the view with ViewModelProps — do not duplicate payload fields there.

import { ViewModelBase } from 'mobx-view-model';
import { withPropsViewModel, type ViewModelProps } from 'mobx-view-model-react';

interface Payload {
  userId: string;
}

class PageVM extends ViewModelBase<Payload> {}

interface PageViewProps extends ViewModelProps<PageVM> {}

export const Page = withPropsViewModel(PageVM, ({ model }: PageViewProps) => {
  return <div>{model.payload.userId}</div>;
});

<Page userId="1" />

Optional payload fields work as usual — the component can be rendered with no props or with a subset of them.

interface Payload {
  title?: string;
}

class TitleVM extends ViewModelBase<Payload> {}

export const Title = withPropsViewModel(TitleVM, ({ model }) => (
  <div>{model.payload.title ?? 'untitled'}</div>
));

<Title />
<Title title="hello" />

Configuration

export const Page = withPropsViewModel(
  PageVM,
  () => <div>...</div>,
  {
    id: 'page',
    fallback: () => <div>loading...</div>,
  },
);

All withViewModel config options except getPayload.

Notes

• Not compatible with <Suspense /> / lazy() — same as withViewModel.
• Generic ViewModel types — same caveats as withViewModel.