0.0.3 • Published 3 years ago
react-receptionist v0.0.3
react-receptionist
WARNING: Work in progress.
Small react-router
wrapper to add some nice features like named routes and authentication.
Small example
Read codebase for usage.
routes.ts
import { Route, Routes } from 'react-receptionist';
import Page from './Page';
import Landing from './Landing';
export const page: Route<{ uid: string }, { s?: string }> = {
path: '/subpage/:uid',
component: Page,
}
export const root: Route = {
path: '/',
component: Landing,
// nested routes, render {children} inside Landing to render nested routes
// netsted route path appended to parent
routes: [
page,
]
}
const routes: Routes = [
root,
];
export default routes;
Landing.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { page } from 'routes';
import { useReceptionist } from 'react-receptionist';
export const Landing: React.FunctionComponent = function Landing({ children }) {
const { link } = useReceptionist();
return (
<div className={s.root}>
<Link to={link(page, { uid: 'page-uid' }, { s: 'query' })}>page</Link>
{children}
</div>
);
};
Page.tsx
import React from 'react';
export const Page: React.FunctionComponent = function Page() {
const { params, qs } = useReceptionist();
return (
<div>
<div>params: {JSON.stringify(params)}</div>
<div>query string: {JSON.stringify(qs)}</div>
</div>
);
};
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { ReactReceptionist } from 'react-receptionist';
import routes from './routes';
ReactDOM.render(
<React.StrictMode>
<ReactReceptionist routes={routes} />
</React.StrictMode>,
document.getElementById('root')
);