alakazam v1.3.4

Alakazam is a routing library built on top of the React and the HTML5 history API, which can used to create navigation in React apps using either JavaScript or TypeScript. -- The Alakazam module is a light weight router that only ships the basics you'll need to create a single page application using the HTML5 history API. Comming in at only 3kb!

Components are the heart of React's powerful, declarative programming model. The React History Router is a collection of navigational functions and components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering!

≪ Documentation · Donate Support · My other Modules ≫

Made with ♥ by Jeffrey Lanters

Installation

Install using npm for your JavaScript (babel) and TypeScript React Project.

$ npm install alakazam

Example Usage

import * as React from  "react";
import * as ReactDOM from 'react-dom';
import { Router } from "alakazam";

export const routes = [{
  path: "/about",
  component: AboutView,
  data: {}  //  per route optional data
},{
  path: "/about/overview",  //  Define hardcoded before params
  component: AboutOverviewView
},{
  path: "/about/:name",  //  Make complex routes using params
  component: AboutDetailView
}];

export class AboutDetailView extends React.Component {
  render() {
    const route = this.props.routing.route;
    const params = this.props.routing.params;
    const queries = this.props.routing.queries;
    return <div>
      <h1>{params.name}</h1>
      <img src={`images/${params.name}.png`} />
      <div onClick={() => Router.push('/about')}>{'About'}</div>
      <div onClick={() => Router.push('/about/:id', { id: 'jeffrey' })}>{'About Jeffrey'}</div> 
      <div onClick={() => Router.replace('/about')}>{'About'}</div>
      <div onClick={() => Router.back()}>{'Back'}</div>
      <div onClick={() => Router.forward()}>{'Forward'}</div>
      <a href={'/about'}>{'About Classic A tag'}</div>
    </div>;
  }
}

ReactDOM.render(
  <Router 
    routes={routes} 
    onRouteWillChange={route => { }}
    onRouteDidChange={route => { }}
  />, 
  document.getElementById('root')
);