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')
);