mobx-view-model

Appearance

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!

Same as withViewModel: the render function is always wrapped with observer().

Signature ​

tsx
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.

tsx
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.

tsx
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 ​

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

All withViewModel config options except getPayload.

Notes ​