Getting Started
From zero to a working push/pop in a few minutes
Install
pnpm add @flemo/reactBuild your first screen
Register your routes
@flemo/react uses TypeScript module augmentation to make paths and params type-safe. The simplest
setup is to declare every route at the bottom of the file where <Router> is mounted.
declare module "@flemo/react" {
interface RegisterRoute {
"/": undefined;
"/posts/:slug": { slug: string };
}
}TypeScript merges declarations across files, so you can also colocate each route with the page that owns it. Same behavior, more local.
export default function Post() {
/* … */
}
declare module "@flemo/react" {
interface RegisterRoute {
"/posts/:slug": { slug: string };
}
}Mount the Router
Render <Router> with a list of <Route>s. Whatever matches the URL becomes the active screen.
import { Route, Router } from "@flemo/react";
import Home from "./Home";
import Post from "./Post";
export default function App() {
return (
<Router>
<Route path="/" element={<Home />} />
<Route path="/posts/:slug" element={<Post />} />
</Router>
);
}Build screens and navigate
Wrap each route's element in <Screen>. Use useNavigate() to move between them.
import { Screen, useNavigate } from "@flemo/react";
export default function Home() {
const navigate = useNavigate();
return (
<Screen>
<h1>Home</h1>
<button onClick={() => navigate.push("/posts/:slug", { slug: "hello" })}>Open hello</button>
</Screen>
);
}import { Screen, useNavigate, useParams } from "@flemo/react";
export default function Post() {
const navigate = useNavigate();
const { slug } = useParams<"/posts/:slug">();
return (
<Screen>
<h1>{slug}</h1>
<button onClick={() => navigate.pop()}>Back</button>
</Screen>
);
}That's the whole loop. Tap Open hello and the post screen slides in (cupertino is the default). Drag from the left edge (or tap Back) and it slides out.