npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-router-mobx

v1.2.2

Published

when react-router meets mobx: observable router and location

Downloads

55

Readme

react-router-mobx

Build Status Coverage Status npm version License

When React Router meets MobX: observable router and location.

Table of Contents

Features

  • location are observable
  • Built-in query observable object to location
  • Super easy to push/update new URL, pathname, hash, search or query

WTF

If you wanna push url from http://aweso.me/search?q=hello&page=4 to http://aweso.me/search?q=hello&page=5, you may need:

Before
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import qs from 'qs';
import myStore from './stores/myStore';

@withRouter
@observer
export default class MyApp extends Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  goToNextPage = (ev) => {
    ev.preventDefault();
    const { location, history } = this.props;
    const query = qs.parse(location.search ? location.search.slice(1) : '');
    history.push({
      ...location,
      search:
        '?' +
        qs.stringify({
          ...query,
          page: 1 + query.page,
        }),
    });
  };

  render() {
    const { location } = this.props;
    const { page } = qs.parse(location.search ? location.search.slice(1) : '');
    return (
      <div>
        <div>{myStore.someContent}</div>
        <p>Page: {page || 1}</p>
        <button onClick={this.goToNextPage}>Next</button>
      </div>
    );
  }
}
After
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import myStore from './stores/myStore';
import routerStore from './stores/routerStore';

@observer
export default class MyApp extends Component {
  goToNextPage = (ev) => {
    ev.preventDefault();
    const { location } = routerStore;
    location.query = {
      ...location.query,
      page: 1 + location.query.page,
    };
  };

  render() {
    const { page } = routerStore.location.query;
    return (
      <div>
        <div>{myStore.someContent}</div>
        <p>Page: {page || 1}</p>
        <button onClick={this.goToNextPage}>Next</button>
      </div>
    );
  }
}

Installation

yarn add react-router-mobx

You should install all the peer dependencies if you haven't installed them:

yarn add react mobx mobx-react react-router-dom

If you are using React Native, please install react-router-native instead of react-router-dom.

Usage

  1. Use react-router-mobx Router instead of react-router Router
  2. Pass a RouterStore instance and react-router Router component to Router component:
import React, { Component } from 'react';
import { Router, RouterStore } from 'react-router-mobx';
import { BrowserRouter, Route } from 'react-router-dom';

const routerStore = new RouterStore();

export default class App extends Component {
  render() {
    return (
      <Router component={BrowserRouter} routerStore={routerStore}>
        <Route {...someRouteConfigs} />
      </Router>
    );
  }
}

API Reference

RouterStore

The MobX store class that contains some router properties and methods.

RouterStore#location

A little bits like react-router location object which contains key, pathname, search, hash, state. But there are several differences:

  • Prividing query object, just like react-router v3 or below
  • All properties are observable and mutable
  • Could push URL by passing new location or properties, just like window.location
    • Push a new URL: routerStore.location = '/foo?say=hello'
    • Push a new pathname, i.e. from /foo?say=hello to /bar?say=hello: routerStore.location.pathname = '/bar'
    • Push a new search, i.e. from /foo?say=hello to /foo?say=world: routerStore.location.query = { say: 'world' } or routerStore.location.search = '?say=world'
RouterStore#history

Just like react-router history object, except for history.listen:

history.listen((location, prevLocation, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
  console.log(`The previous URL is ${prevLocation.pathname}${prevLocation.search}${prevLocation.hash}`);
});
RouterStore#push(loc, state)

Like react-router history.push(loc, state), but the loc param supports to be an object that contains a query object.

RouterStore#replace(loc, state)

Like react-router history.replace(loc, state), but the loc param supports to be an object that contains a query object.

Router

The low-level api router component instead of react-router Router component.

Props
  • routerStore (RouterStore): Defining a RouterStore instance to store or update location state
  • component (ReactComponent): Defining the react router component, e.g. BrowserRouter, MemoryRouter, NativeRouter, etc. Defaults to react-router Router component
  • history (Object): You can also define a custom history object, just like react-router Router component
  • All properties in react-router Router are supported

setQueryString(queryString)

Setting a custom queryString library.

Arguments
  1. queryString (Object): Custom queryString library, which should contain parse(object) and stringify(object) methods
Example
import { setQueryString } from 'react-router-mobx';
import { parse, stringify } from 'qs';
setQueryString({ parse, stringify });

Versioning

This library follows Semantic Versioning.

This library is considered to be General Availability (GA). This means it is stable; the code surface will not change in backwards-incompatible ways unless absolutely necessary (e.g. because of critical security issues) or with an extensive deprecation period. Issues and requests against GA libraries are addressed with the highest priority.

License

MIT