Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scssyworks/silkrouter
Silk router is a reactive library for creating SPAs
https://github.com/scssyworks/silkrouter
hash-routing jquery jquery-router plugin reactive router routing rxjs silk-router
Last synced: 13 days ago
JSON representation
Silk router is a reactive library for creating SPAs
- Host: GitHub
- URL: https://github.com/scssyworks/silkrouter
- Owner: scssyworks
- License: mit
- Created: 2017-08-08T09:46:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-13T06:10:42.000Z (about 2 months ago)
- Last Synced: 2024-10-21T02:25:52.856Z (20 days ago)
- Topics: hash-routing, jquery, jquery-router, plugin, reactive, router, routing, rxjs, silk-router
- Language: JavaScript
- Homepage: https://scssyworks.github.io/silkrouter/
- Size: 6.12 MB
- Stars: 41
- Watchers: 3
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://github.com/scssyworks/silkrouter/actions/workflows/node.js.yml)
# Silk router
Silk router is a reactive and light-weight (1.5kb gzipped) routing library.
# Installation
```sh
npm install --save silkrouter rxjs
```
Silk router is dependant on `rxjs` for classes such as `Observable` and
`Subscription`. Please install this package as a separate (peer) dependency.
# Usage
1. Import `Router` class
```js
import { Router } from 'silkrouter';
...
```
2. Create an instance
```js
const router = new Router();
```
3. Add a `route` handler
```js
router.subscribe((e) => {
// Listens to changes to route
});
```
4. Navigate to a `route`
```js
router.set("/path/to/route"); // Route should always start with a '/'
```
# Hash router
Silkrouter also adds `hash` routing capability. Hash routes are useful when
back-end doesn't have a way to support page paths. Hash routing can be enabled
via `hashRouting` flag.
```js
const router = new Router({
hashRouting: true,
});
```
Please note that silkrouter replaces the current path with a hash path by
default. To disable this behaviour you need to preserve the current path.
```js
const router = new Router({
hashRouting: true,
preservePath: true,
});
```
Path preservation only works for hash routing.
# Disable initialization
Silkrouter automatically calls the handler as soon as it is attached. This
behaviour allow consumers to mount components on page load. To attach the
listeners silently, you can disable this behaviour.
```js
const router = new Router({
init: false,
});
```
Please note that disabling initialization doesn't effect the routing
functionality. Route changes are still caught by the handlers.
# Operators
From version 5 onwards `silkrouter` does not ship its own operators. You can
create your own operators as needed, or use the ones built by the awesome
JavaScript community.
```js
const router = new Router();
router.pipe(myOperator()).subscribe((event) => {
// ...
});
```
myOperator.js
```js
export function myOperator() {
return (observable) =>
new Observable((subscriber) => {
const currSubscription = observable.subscribe({
next(value) {
// ...
subscriber.next(/* updated value */);
},
error: subscriber.error,
complete: subscriber.complete,
});
// ...
return () => {
return currSubscription.unsubscribe();
};
});
}
```
# Contribution
We invite you all to contribute to `silkrouter` and make it better. Please feel
free to open discussions, fork this repository and raise PRs.