raphaelameaume / lemonade-router

(beta) Minimal routing library 🧭

lemonade-router

lemonade-router is a minimal non-opiniated routing library to create websites and interactive experiences with custom transitions. It is heavily inspired by Barba.js and React Router and uses history under the hood.

It is built using ES6 features.

• Documentation
• Examples

Installation

npm install lemonade-router

Usage

import { Router } from "lemonade-router";

let router = Router();

// views
router.view('/', () => Home());
router.view('/news', () => News());

// matches
router.match('/news/:id', async ({ params }) => {
    let News = await import('./News.js');

    router.view(`/news/${params.id}`, () => News(params.id));
});

router.match('*', async () => {
    let NotFound = await import('./NotFound.js');

    router.view('*', () => NotFound());
});

// transitions
router.transition('/', '/news', () => FromHomeToNews());

router.listen();

Motivation

This routing library attempts to solve different problems I had the past few years working on websites and interactives experiences:

• Change URL without fetching an existing page, useful for WebGL experiences or when all the DOM is already here
• Create custom transitions where I have total control over DOM changes
• Define complex loading sequences
• Allow multiple pages to work on different URLs (multilingual websites)
• Split code to avoid loading big bundles

Credits

• Barba.js
• React Router
• Canvas-sketch

License

MIT License, see LICENSE for details