react-context-router

    1.1.0 • Public • Published

    react-context-router

    Minimal React router based on React context

    Build Status

    npm i react-context-router

    React Router is an excellent routing solution, but sometimes it does a lot more than you need it to. This is intended to be a smaller option with a simpler API.

    Features

    • Small-ish package ~5KB
    • Simple API
    • One higher order component and two components: Router & Link
    • Pass props directly to any component
    • Pass anything through route context

    Usage

    // App.js
    import React from 'react'
    import { createRouter, Link } from 'react-context-router'
     
    const NotFound = () => <div>Not Found</div>
     
    const Nav = () => (
      <nav>
        <Link href='/' children='Home' />
        <Link href='/posts/1' children='First Post' />
      </nav>
    )
     
    class App extends React.Component {
      render () {
        const { route } = this.props
        const Comp = route.component || NotFound
     
        return (
          <div>
            <Nav />
            <Comp />
          </div>
        )
      }
    }
     
    export default createRouter(App)
    // entry.js
    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    import Index from './Index'
    import Post from './Post'
     
    const routes = [
      {
        path: '/',
        // Put any other route data here.
        // This object will be provided through
        // React context to the Router's children.
        component: Index
      },
      {
        path: '/posts/:id',
        component: Post
      }
    ]
     
    const div = document.getElementById('app')
     
    ReactDOM.render(<App routes={routes}>, div)

    Server-side rendering

    Pass a pathname to the Router component to populate the context for a particular route.

    const React = require('react')
    const ReactDOM = require('react-dom')
    const h = React.createElement
    const App = require('./App')
     
    const routes = [
      {
        path: '/',
        name: 'Index'
      },
      {
        path: '/posts/:id',
        name: 'Post'
      }
    ]
     
    const html = ReactDOMServer.renderToString(
      h(App, {
        routes,
        // Pass a value to the pathname prop for server side rendering
        pathname: '/posts/32'
      })
    )

    API

    createRouter

    Higher order component that provides history and route data through context.

    routes prop

    Array of route objects. Each route must include a path. Any other value added to the object will be provided through context as the route object when the location matches the path.

    pathname prop

    Manually pass in a pathname to set the current path for server-side rendering.

    Child Context

    The wrapped component provides the following objects as context to its children:

    • history wrapped window.history object with listen and push methods
    • route object from the matching item in the routes prop. When a path contains parameters they will be passed as route.params.

    <Router /> component

    Component wrapped with createRouter, provided as a convenience.

    <Link /> component

    Used in place of <a> links to use client-side history navigation.

    Size comparison

    Gzip:

    • react-context-router: 19.04 KB (5.13 KB without React)
    • react-router: 40.29 KB with React
    • Baseline react 14.52 KB

    Results from bundle-size

    MIT License

    Install

    npm i react-context-router

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • jxnblk