Using all props as payload for your ViewModel

This recipe is helpful if you want to use all props as payload (this.payload) in your ViewModel.

Recommended: withPropsViewModel

Use withPropsViewModel — it is withViewModel with getPayload: (props) => props and correct typings (no separate payload prop on the component).

What you will need:

• ViewModelBase or custom implementation of ViewModel interface
• withPropsViewModel HOC

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

interface ComponentProps {
  foo: number;
}

class YourVM extends ViewModelBase<ComponentProps> {}

export const YourComponent = withPropsViewModel(YourVM, ({ model }) => {
  return <div>{model.payload.foo}</div>;
});

<YourComponent foo={1} />

Configuration (fallback, id, anchors, etc.) is the same as for withViewModel, except there is no getPayload option.

Alternative: manual withViewModel + cast

If you stay on withViewModel, pass props type into the first generic of ViewModelBase, set getPayload: (props) => props, and cast the output component type:

import { ViewModelBase } from 'mobx-view-model';
import { withViewModel } from 'mobx-view-model-react';
import type { ComponentType } from 'react';

interface ComponentProps {
  foo: number;
}

class YourVM extends ViewModelBase<ComponentProps> {}

export const YourComponent = withViewModel(
  YourVM,
  ({ model }) => <div>{model.payload.foo}</div>,
  { getPayload: (props) => props },
) as unknown as ComponentType<ComponentProps>;

<YourComponent foo={1} />

Prefer withPropsViewModel to avoid the cast.