@real-router/react/ink — a packaged alternative to the MemoryRouter routing recipe

[greydragon888]

Hi all 👋

Following the routing recipe merged in #874, I wanted to share a packaged take on the same problem: @real-router/react/ink — a subpath export on @real-router/react that ships a focus-aware <InkLink> and pairs with @real-router/memory-plugin instead of React Router's MemoryRouter.

What the recipe recommends (recap)

"routes aren't URLs, they're just screen states"
"Users should leverage useNavigate for navigation rather than the <Link> component, which renders HTML anchors incompatible with terminal environments"

So each menu entry ends up being a hand-rolled useInput + useNavigate pair, and there's no Link-equivalent out of the box.

What this adds on top

• <InkLink> — joins Ink's focus ring via useFocus, Enter calls router.navigate(...). Props mirror what you'd expect (routeName, routeParams, activeColor, focusColor, inverse/activeInverse, onSelect, id, autoFocus).
• InkRouterProvider — provider without any DOM-specific bits (no announceNavigation / aria-live).
• Subtree-scoped hooks — useRouteNode("users") subscribes to the users.* subtree only, which maps naturally onto Ink's section-based rendering.
• No extra package — same package name as the browser entry, just a different subpath: import { InkLink, InkRouterProvider, useRouteNode } from "@real-router/react/ink".

Minimal example:

import { createRouter } from "@real-router/core";
import { memoryPluginFactory } from "@real-router/memory-plugin";
import { InkLink, InkRouterProvider, useRouteNode } from "@real-router/react/ink";
import { Box, Text, render } from "ink";

const router = createRouter([
  { name: "home", path: "/" },
  { name: "users", path: "/users", children: [{ name: "view", path: "/:id" }] },
]);
router.usePlugin(memoryPluginFactory());
await router.start("/");

const App = () => {
  const { route } = useRouteNode("");
  return (
    <Box flexDirection="column" paddingX={1}>
      <Box columnGap={2}>
        <InkLink routeName="home" focusColor="cyan" activeColor="green" autoFocus>[ Home ]</InkLink>
        <InkLink routeName="users" focusColor="cyan" activeColor="green">[ Users ]</InkLink>
      </Box>
      <Text>current: {route?.name}</Text>
    </Box>
  );
};

render(<InkRouterProvider router={router}><App /></InkRouterProvider>);

Requirements

Ink 7+, React 19.2+, Node 22+ — same floor Ink itself uses. ink is an optional peer dependency, so consumers who only use the browser entries don't get install prompts for it.

Links

• Package: https://www.npmjs.com/package/@real-router/react
• Docs (Ink section): https://github.com/greydragon888/real-router/tree/master/packages/react#ink-terminal-ui
• Runnable example (examples/react/ink-demo/): https://github.com/greydragon888/real-router/tree/master/examples/react/ink-demo

Caveats / asks

• Early days — feedback on the API (<InkLink> prop surface, hook ergonomics in Ink apps) is very welcome.
• Not trying to replace the recipe — just a packaged option for teams that want less boilerplate per menu entry.

Happy to answer questions, and thanks for Ink — it's a joy to build on top of. 🙌