lemonade-router

KO | EN

gitlite — search

#ai #golang #android #deep-learning #docker #macos #nodejs #windows #cli #awesome-list #vue #pytorch #mcp #open-source

lemonade-router

(★ 31)

(beta) Minimal routing library 🧭

lemonade-router Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://github.com/barbajs/barba) and [React Router](https://github.com/ReactTraining/react-router) and uses [history](https://npmjs.com/package/history) under the hood.

It is built using ES6 features.

- [Documentation](https://github.com/raphaelameaume/lemonade-router/tree/master/docs/README.md)
- [Examples](https://github.com/raphaelameaume/lemonade-router/tree/master/demo)

## Installation

`npm install lemonade-router`

### Usage

```js
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](https://github.com/barbajs/barba)
- [React Router](https://github.com/ReactTraining/react-router)
- [Canvas-sketch](https://github.com/mattdesl/canvas-sketch)

## License

MIT License, see [LICENSE](https://github.com/raphaelameaume/lemonade-router/tree/master/LICENSE) for details

lemonade-router

lemonade-router Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

lemonade-router

lemonade-router Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README