0.3.1 • Published 4 years ago
crank-router v0.3.1
Crank Router
Router component for Crank engine, which is based on Iterable Observer.
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.onload = () =>
renderer.render(
<Router
className="router"
startClass="start"
endClass="end"
map={[
{ path: '', component: Page },
{ path: 'test', component: Page },
{ path: 'example', component: Page }
]}
/>,
document.body
);
Page.tsx
import { createElement, Fragment } from '@bikeshaving/crank';
import { PageProps } from 'crank-router/source';
const Color = {
test: 'lightblue',
example: 'pink'
};
export function Page({ path, history, ...data }: PageProps) {
return (
<Fragment>
<nav>
<a href="test?id=1">Test</a>
<a href="example?id=2">Example</a>
</nav>
<ul style={{ background: Color[path] }}>
<li>path: {path}</li>
<li>data: {JSON.stringify(data)}</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;
}
}
Inspiration
https://github.com/bikeshaving/crank/issues/27#issuecomment-617633472