Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krutsch/router-dom
A lightweight router for everyone
https://github.com/krutsch/router-dom
history javascript link router routing
Last synced: about 1 month ago
JSON representation
A lightweight router for everyone
- Host: GitHub
- URL: https://github.com/krutsch/router-dom
- Owner: Krutsch
- License: mit
- Created: 2021-05-12T21:21:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-09T12:25:14.000Z (2 months ago)
- Last Synced: 2024-10-28T22:50:27.822Z (about 2 months ago)
- Topics: history, javascript, link, router, routing
- Language: HTML
- Homepage:
- Size: 1.71 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# router-dom
> A lightweight router for single-page applications with faster subsequent page-loads by prefetching links during idle time if the user is not saving data.
>
> - it helps to reduce the delay between your pages, to minimize browser HTTP requests and enhance your user's web experience.
> - library agnostic.
> - simple: define your routes, start to listen global event and to route changes.
> - base href support.
> - opt-in errorHandler and formHandler.
> - support in all modern browsers.
> - RegExp and nested Routes.
## Demo
Simple: https://codepen.io/FabianK/pen/vYxXjwv?editors=1000
Advanced: https://page-transitions-router.netlify.app
## Installation
With npm:
```properties
$ npm i router-dom
```
or via CDN:
```html
import Router from "https://cdn.skypack.dev/router-dom";
new Router(...) // see Constructor Documentation
```
## Usage
```
## Dependencies
[path-to-regexp](https://github.com/pillarjs/path-to-regexp): Turn a path string such as '/user/:name' into a regular expression
[hydro-js](https://github.com/Krutsch/hydro-js): Renders the view. In order to pass state via an anchor element (data attribute), a mapping on the hydro object is needed.
## Documentation
### Events
- window: beforeRouting & afterRouting
### Constructor
The router class takes an array with at least one entry. Only the path is mandatory.
Either a template or and element will be rendered in your element with attribute `data-outlet`.
You can also specifiy one-level of children.
One more interesting property is the `restoreScroll`.
The second argument is the optional object options: it can take a general errorHandler, a formHandler, a fetchOptions for the form and the scrollBehavior. If there is a formHandler, form submits will handled via attributes on the form element and fetch.
```js
const router = new Router([
{
path: "/",
restoreScroll: true, // defaults to true
},
{
path: "/about",
templateUrl: "/about.html",
leave: ({ from, to, params, state }) => {},
},
{
path: "/contact/:name",
element: "
Drop a message on [...]
" // or an actual Node Element,
beforeEnter: ({ from, to, params, state }) => {},
afterEnter: ({ from, to, params, state }) => {},
},
]);
```
### go
- Takes a path, a state object and optional params. Will redirect to the path.
### removeRoute
- Removes a route from the routes array.
### addRoute
- Adds a route object to the routes array.
### modifyRoute
- Replaces a route with a new one.
### changeOptions
- Replaces the router options.
### static getParams
- Returns the params as key-value pair.