API Reference

The stable public surface of `@flemo/react`, with the page that explains each part

Components

Export	Summary	Package	More
`Router`	Root container. Renders the active screen.	`@flemo/react`	Router
`Route`	Maps a path (or paths) to an element.	`@flemo/react`	Router
`Screen`	Per-route screen container with app/nav/safe-area slots.	`@flemo/react`	Screen
`LayoutScreen`	Screen variant for shared `layoutId` morphs across screens.	`@flemo/react-layout`	LayoutScreen
`LayoutConfig`	Wraps motion children with the current screen's transition timing.	`@flemo/react-layout`	LayoutScreen

Hooks

Export	Returns	More
`useNavigate()`	`{ push, replace, pop }`	Navigation
`useParams<T>()`	The current route's params (path + query merged)	Navigation
`useStep<T>()`	`{ pushStep, replaceStep, popStep }` for sub-states	Navigation
`useScreen()`	Current screen meta (`id`, `isActive`, `zIndex`, …)	useScreen
`useViewportScrollHeight()`	Visual-viewport scroll metrics, useful for mobile keyboards	—

useScreen() returns metadata about the screen the calling component renders in. It reads from context, so call it inside a <Route> element's tree (the active screen, or any screen still mounted beneath it).

Field	Type	What it is
`id`	`string`	The screen's history-entry id
`isActive`	`boolean`	Whether this is the current (top) screen
`isRoot`	`boolean`	Whether this is the root screen (`zIndex` 0)
`isPrev`	`boolean`	Whether this screen sits below the previous one (frozen, offscreen)
`zIndex`	`number`	Stacking depth. `0` is the root, higher is newer
`pathname`	`string`	The resolved pathname for this screen
`params`	`object`	The route params for this screen
`routePath`	`string`	The matched route pattern (e.g. `/album/:id`)
`transitionName`	`string`	The transition driving the current navigation
`prevTransitionName`	`string`	The transition of the screen one below the top
`layoutId`	`string \| number \| null`	The screen's `layoutId`, if one was passed

function AlbumHeader() {
  const { isActive, zIndex, params } = useScreen();
  // Render differently when this screen is the active one, or read its depth.
}

Transition factories

Export	When to use
`createTransition`	Six-phase transitions (idle / enter / exit / enterBack / exitBack)
`createRawTransition`	Full control over every navigate state
`createDecorator`	Four-phase decorator (initial / idle / enter / exit)
`createRawDecorator`	Decorator with full per-state control

See Transitions for examples.

Built-in transition names

"cupertino" · "material" · "layout" · "none"

Built-in decorator names

"overlay"

Type registries

Interface	Purpose
`RegisterRoute`	Register your routes for type-safe `navigate.push` and `useParams`
`RegisterTransition`	Register custom transition names
`RegisterDecorator`	Register custom decorator names

declare module "@flemo/react" {
  interface RegisterRoute {
    /* … */
  }
  interface RegisterTransition {
    /* … */
  }
  interface RegisterDecorator {
    /* … */
  }
}

Type exports

ScreenProps · TransitionName · RegisterTransition · DecoratorName · RegisterDecorator

Peer dependencies

@flemo/react requires only react ^19 and react-dom ^19. @flemo/react-layout adds motion ^12 as a peer dependency. Install it when you use <LayoutScreen> or <LayoutConfig>.

On this page