https://github.com/raphaelameaume/lemonade-router
(beta) Minimal routing library ðŸ§
https://github.com/raphaelameaume/lemonade-router
Last synced: 30 days ago
JSON representation
(beta) Minimal routing library ðŸ§
- Host: GitHub
- URL: https://github.com/raphaelameaume/lemonade-router
- Owner: raphaelameaume
- License: mit
- Created: 2020-02-06T11:29:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T22:15:16.000Z (8 months ago)
- Last Synced: 2025-04-19T03:35:12.181Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 122 KB
- Stars: 30
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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