React-steersman NPM

React Steersman

Tiny fast and real cross-platform react navigation library

Documentation

Usage

Simple browser example with decorators

import React from 'react';
import { render } from 'react-dom';
import Steersman from 'react-steersman/Steersman';
import createBrowserHistory from 'react-steersman/createBrowserHistory';
import withRoute from 'react-steersman/withRoute';

const history = createBrowserHistory();

@withRoute({ path: '/' })
class Dashboard extends Component {
  render() {
    const { someProp } = this.props;
    return someProp;
  }
}

render(
  <Steersman history={history}>
    <Dashboard someProp="someProp"/>
  </Steersman>,
  document.getElementById('app'),
);

Simple browser example

import React from 'react';
import { render } from 'react-dom';
import Steersman from 'react-steersman/Steersman';
import createBrowserHistory from 'react-steersman/createBrowserHistory';
import Route from 'react-steersman/Route';

const history = createBrowserHistory();

function Dashboard({ direction, status }) {
  return `Dashboard ${direction}-${status}`;
}

function User({ match: { username } }) {
  return `User ${username}`;
}

render(
  <Steersman history={history}>
    <Route path="/" children={Dashboard}/>
    <Route path="/user/:username" children={User}/>
  </Steersman>,
  document.getElementById('app'),
);

Simple react-native example

import React, { Component } from 'react';
import Steersman from 'react-steersman/Steersman';
import createMemoryHistory from 'react-steersman/createMemoryHistory';
import Route from 'react-steersman/Route';

const history = createMemoryHistory();

function Dashboard({ direction, status }) {
  return `Dashboard ${direction}-${status}`;
}

function User({ match: { username } }) {
  return `User ${username}`;
}

export default class App extends Component {
  render() {
    return (
      <Steersman history={history}>
        <Route path="/" children={Dashboard}/>
        <Route path="/user/:username" children={User}/>
      </Steersman>
    );
  }
}

registerRootComponent(App);

Browser example with transitions

import React, { Component } from 'react';
import { render } from 'react-dom';
import Steersman from 'react-steersman/Steersman';
import createBrowserHistory from 'react-steersman/createBrowserHistory';
import Route from 'react-steersman/Route';

const history = createBrowserHistory();


function Dashboard({ className }) {
  return (
    <div className={className}>
      {`Dashboard ${direction}-${status}`}
    </div>
  );
}

class User extends Component {
  render() {
    const { className, match: { username } } = this.props;
    return (
      <div className={className}>
        {`User ${username}`}
      </div>
    );
  }
}

function mapProps({ direction, status }) {
  return {
    className: `fade-${direction}-${status}`,
  };
}

render(
  <Steersman history={history} mapProps={mapProps}>
    <Route path="/" children={Dashboard}/>
    <Route path="/user/:username" children={User}/>
  </Steersman>,
  document.getElementById('app'),
);

Render one route from a group routes

import React from 'react';
import { render } from 'react-dom';
import Steersman from 'react-steersman/Steersman';
import createBrowserHistory from 'react-steersman/createBrowserHistory';
import Route from 'react-steersman/Route';

const history = createBrowserHistory();

render(
  <Steersman history={history}>
    <Route path="/" children={() => 'Home Top Bar'} group="top-bar"/>
    <Route path="/profile" children={() => 'Profile Top Bar'} group="top-bar"/>
    <Route path=".*" children={() => 'Other page Top Bar'} group="top-bar"/>
    <Route path="/" children={() => 'Home'} />
    <Route path="/profile" children={() => 'Profile'}/>
  </Steersman>,
  document.getElementById('app'),
);