mobx-wouter

MobX integration with Wouter

What package has

PageViewModelBase, PageViewModel

Simple ViewModel wrapper for pages

Usage:

import { PageViewModelBase } from 'mobx-wouter';

class HomePageVM extends PageViewModelBase<{ pathParam: string }> {
  @observable
  accessor value = 'value';

  mount() {
    super.mount();
    document.title = 'Home';
    // do something
  }
}

withPageViewModel()

HOC for integration PageViewModel with view component of React

Usage:

import { ViewModelProps } from 'mobx-view-model';  
import { withPageViewModel } from 'mobx-wouter';

const HomePageView = observer(({ model }: ViewModelProps<HomePageVM>) => {
  return <div>{`render value - ${model.value}`}</div>
})

export const HomePage = withPageViewModel(HomePageVM)(HomePageView);

withLazyPageViewModel()

Same as withPageViewModel() but with lazy loading view and view model

MobxRouter

Router for client navigation

MobxLocation, MobxHistory, QueryParams and etc

Exports from mobx-location-history

Usage

import { MobxRouter, MobxLocation, MobxHistory, QueryParams } from "mobx-wouter";

const router = new MobxRouter({
  history: //, new MobxLocation()
  location: //, new MobxHistory()
  queryParams: //, new QueryParams(),
  abortSignal: //
})