withViewModel HOC

A Higher-Order Component that connects React components to their ViewModels, providing seamless MobX integration.

API Signature

function withViewModel<VM extends AnyViewModel>(
  ViewModelClass: Constructor<VM>,
  config?: ViewModelHocConfig<VM>
): (Component: ComponentType<ComponentProps & ViewModelProps<VM>>) => ComponentWithViewModel

Usage

1. Basic Usage (Default Configuration)

export const YourComponent = withViewModel(VMClass)(ViewComponent)

2. Custom Configuration

export const YourComponent = withViewModel(VMClass, {
  config: {}, // vmConfig
  ctx: {}, // internal object as source for all cache inside this HOC
  factory: (config) => new config.VM(config), // factory method for creating VM instances
  fallback: () => <div>loading</div>, // fallback component for cases when your VM is mounting\loading
  generateId, // custom fn for generate id for this VM instances
  getPayload: (props) => props.payload, // function to getting payload data from props
  id, // unique id if you need to create 1 instance of your VM
  reactHook: (allProps, ctx, viewModels) => void 0, // hook for integration inside render HOC component  
})(ViewComponent)

Example:

import { ViewModelBase, ViewModelProps, withViewModel } from "mobx-view-model";
import { observer } from "mobx-react-lite";
import { observable, action } from "mobx";

class VM extends ViewModelBase {
  @observable
  accessor value = '';

  @action
  setValue = (value: string) => {
    this.value = value;
  }
}

const ComponentView = observer(({ model }: ViewModelProps<VM>) => {
  return (
    <div>
      <input value={model.value} onChange={e => model.setValue(e.target.value)} />
    </div>
  )
})

export const YourComponent = withViewModel(VM)(ComponentView)

Incompatibility with <Suspense /> and lazy()

The withViewModel HOC is not compatible with the React's built-in <Suspense /> component and lazy() function.

Using Suspense and lazy with withViewModel HOC can lead to unexpected behavior and bugs due to double/triple calls of useMemo or lazy useState hooks inside useCreateViewModel hook.

To avoid this issue, it is recommended to use withLazyViewModel HOC instead.