@ankhzet/router

Simple router

Usage example:

// App.tsx
import { UIRouter } from '@ankhzet/router';
import { Routing } from './routing';

export function App() {
  return (
      <UIRouter root={Routing} />
  );
}

// ./routing.tsx
import { PropsWithChildren } from 'react';
import { UIRoute, Link, useLocationState } from '@ankhzet/router';
import { Routes, BParams } from './routes';

const RootScreen = ({ children }: PropsWithChildren) => (
    <div>
        <div>Root Screen</div>
        <div>{children}</div>
    </div>
);

const Screens = ({ children }: PropsWithChildren) => (
    <div>
        <div>Screens</div>
        <div>
            <div><Link to={Routes.screens.a.root()}>A</Link></div>
            <div><Link to={Routes.screens.b.root({ first: 1, second: 2 })}>B</Link></div>
            <div><Link to={Routes.screens.c.root()}>C</Link></div>
        </div>
        <div>{children}</div>
    </div>
);

const ScreenA = () => (
    <div>Screen A</div>
);

const ScreenB = () => {
    const { first, second } = useLocationState<BParams>({});
    
    return (
        <div>
            <div>Screen B</div>
            <div>
                <div>First: {first}</div>
                <div>Second: {second}</div>
            </div>
        </div>
    );
}

const ScreenC = () => (
    <div>Screen C</div>
);

export const Routing = UIRoute.process(Routes, {
    screen: RootScreen,
    children: {
        screens: {
            screen: Screens,
            children: {
                a: {
                    screen: ScreenA,
                },
                b: {
                    screen: ScreenB,
                },
                c: {
                    screen: ScreenC,
                },
            },
        },
    },
});

// ./routes.ts
import { UIRoute } from '@ankhzet/router';

export type BParams = { first: number; second: number };

export const Routes = UIRoute.route({
    screens: UIRoute.route('/screens', {
        a: UIRoute.route('/screens/a'),
        b: UIRoute.make<BParams>('/screens/b', (pathname) => (state) => ({
            pathname,
            // tweak state here?
            state, 
        })),
        c: UIRoute.route('/screens/c'),
    }),
});

// or 

export const Screens = UIRoute.route('/screens', {
    a: UIRoute.route('/screens/a'),
    b: UIRoute.make<BParams>('/screens/b', (pathname) => (state) => ({ pathname, state })),
    c: UIRoute.route('/screens/c'),
});

export const Routes = UIRoute.route({
    screens: Screens,
});

API Reference