component-router

    3.1.1 • Public • Published

    component-router npm

    Redux-based routing solution for components

    Gitter CircleCI Dependencies Dev Dependencies

    Idea

    The idea of partial routing is coming from the need to track state of independent components in the URL.

    Commonly used routers are mostly hierarchical. The great example of such a router is react-router. Unfortunately it is not possible to store component's state independently from the other component in a different "branch" of hierarchy.

    They work perfectly for most of the UIs. But as soon as we are trying to build a complex UI with multiple independent components and each of those has own state you would like to preserve, it becomes a challenging task. ComponentRouter was created to provide a simple way of keeping such state in the URL with query params.

    Here is an example of such interface.

    1. Chart block, which can be switched from bar to pie
    2. Filter block, that can be opened or closed
    3. Data panel with two tabs: sources and destinations
    +------------------------------------------------------------------------------+
    |  App "/app"                                                                  |
    |                                                                              |
    |  +------------------------------+  +---------------------------------------+ |
    |  |  chart                       |  |  filter                               | |
    |  |  [->bar] [pie]               |  |  [->opened] [closed]                  | |
    |  |                              |  |                                       | |
    |  |                              |  |                                       | |
    |  |                              |  |                                       | |
    |  |                              |  |                                       | |
    |  |                              |  |                                       | |
    |  +------------------------------+  +---------------------------------------+ |
    |                                                                              |
    |  +---------------------------------------------------+                       |
    |  |  data                                             |                       |
    |  |  [->sources] [destinations]                       |                       |
    |  |                                                   |                       |
    |  +---------------------------------------------------+                       |
    |                                                                              |
    +------------------------------------------------------------------------------+
    

    As you can see each of these blocks has its own independent navigation and, for example, Filter can be closed or opened independently from currently displayed Chart type or Data tab selected.

    1. We can always keep the state of each block, but you will loose that state on page refresh.
    2. We can keep their states in some specialized Redux Store and cache in localStorage or even user settings in database on the server. But we are losing ability to share this page with someone else (unless we have some special "copy/paste state" functionality)
    3. At last we can keep state of each component in the URL as query parameter, which solves both problems. Current URL will be: /app?chart=bar&filter=opened&data=sources

    Key feature is to update all links on the page if any of visible blocks changed its state. If lets all links to stay links, so it is possible to open link in a new tab, for instance. It is fixed by ComponentRouter.

    Minimal example

    Minimal example

    Better example

    NOTE href changes, so we can open link in new tab.

    Better example

    Installation

    NPM

    npm install --save redux history qs component-router

    Don't forget to manually install peer dependencies (redux, history, qs) if you use npm@3.

    1998 Script Tag:

    <script src="https://unpkg.com/redux/dist/redux.min.js"></script>
    <script src="https://unpkg.com/qs/dist/qs.js"></script>
    <script src="https://unpkg.com/history/umd/history.min.js"></script>
    <script src="https://unpkg.com/component-router/build/component-router.min.js"></script>
    (Module exposed as `ComponentRouter`)

    Demo

    http://in-flux.github.io/component-router

    Codepen demo

    http://codepen.io/nkbt/pen/BNXamG?editors=101

    Since ComponentRouter is working with browser location and navigation, it is not really possible to debug router in Codepen's Editor mode, but completely possible in Debug mode: http://s.codepen.io/nkbt/debug/BNXamG

    Usage

    See example/App/index.js

    Development and testing

    Currently is being developed and tested with the latest stable Node 8 on OSX.

    To run example covering all ComponentRouter features, use yarn start, which will compile example/index.js

    git clone git@github.com:in-flux/component-router.git
    cd component-router
    yarn install
    yarn start
     
    # then 
    open http://localhost:8080

    Tests

    # to run ESLint check 
    yarn lint
     
    # to run tests 
    yarn test
     
    # to run end-to-end tests 
    # first, run `selenium/standalone-firefox:3.4.0` docker image 
    docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
    # then run test 
    yarn e2e

    License

    MIT

    Install

    npm i component-router

    DownloadsWeekly Downloads

    21

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    82.4 kB

    Total Files

    39

    Last publish

    Collaborators

    • nkbt