mobx-wouter

MobX integration with Wouter

What package has

Router

Router for client navigation

Usage

const history = createBrowserHistory();
// const history = createMemoryHistory();
// const history = createHashHistory();

const router = createRouter({
  history,
  // baseUrl
  // abortSignal
  // useStartViewTransition
  queryParams: createQueryParams({
    history,
  }),
});

createBrowserHistory, createQueryParams and etc

Exports from mobx-location-history

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