Crank Router
Router component for Crank engine, which is based on Iterable Observer.
Feature
-
Page Link (support
<a />
,<area />
&<form />
)<a href="route/path">Page title</a>
<a href="route/path" title="Page title" target="_self">Example page</a>
<a href="#page-section">Page section</a>
(Scroll to an Anchor smoothly)<form method="get" action="route/path" />
(Form Data processed byURLSearchParams
)
-
Path Mode:
location.hash
(default) &history.pushState()
-
Async Loading (recommend to use with
import()
ECMAScript proposal)
Installation
npm install @bikeshaving/crank crank-router \ iterable-observer web-utility
Example
index.tsx
import createElement from '@bikeshaving/crank';import renderer from '@bikeshaving/crank/dom';import Router from 'crank-router/source'; import Page from './Page'; window renderer;
Page.tsx
import createElement Fragment from '@bikeshaving/crank';import PageProps from 'crank-router/source'; const Color = test: 'lightblue' example: 'pink'; { return <Fragment> <nav> <a ="test?id=1">Test</a> <a ="example?id=2">Example</a> </nav> <ul => <li>path: path</li> <li>data: JSON</li> </ul> </Fragment> ;}
index.less
body { margin: 0;}nav > a { display: inline-block; margin: 0.5rem;}.router { width: 100vw; height: 100vh; overflow: auto; position: relative; & > * { position: absolute; top: 0; left: 0; transform: translateX(0); opacity: 1; transition: 0.5s; } .start { transform: translateX(100%); opacity: 0; } .end { transform: translateX(-100%); opacity: 0; }}