Reference

API reference

Every public export of @flemo/react, grouped by job, with a one-line description and the page that explains it.

2 min read

Import everything from @flemo/react. Its only peer dependencies are react and react-dom 19 (^19.2.8); <Morph> needs no animation library beside it.

Components

NameWhat it isPage
RouterManages one screen stack with its transitions, gestures and history
RouteMaps a path pattern to an element
SlotMarks the moving region; everything else in the Router stays mounted
ScreenThe per-route container, with bars, shared bars and safe areas
PartRuns a named part transition on one element of a screen
MorphA shared element: one thing on two screens, paired by layoutId
LayerRenders an overlay outside its screen's content so it can cover the shared header and tab bar

Hooks

NameWhat it isPage
useNavigate(options?){ push, replace, pop } for one Router; { router } picks which
useParams<"/path/:id">()The enclosing screen's params, typed by a registered route
useStep(){ step, pushStep, replaceStep, popStep }: history sub-states without a new screen
useScreen()The enclosing screen's id, route and position in the stack, such as whether it is the top screen
usePathname()The nearest Router's pathname, for a header or tab bar outside a Screen. During a pop it reports the destination path from the first frame
useViewportScrollHeight()The visual viewport's scroll height and its change from the app-wide baseline, for keyboard handling
useScreen fieldsDetails
FieldWhat it is
idThe screen's history entry id
isActiveWhether this is the top screen. It follows the stack, so a screen that is closing during a pop is still active
isRootWhether this is the root screen of its stack
isPrevWhether this screen sits deeper than the one directly below the top, so it does not move during a transition
zIndexStack depth; 0 is the root, higher is newer
pathname / paramsThe resolved pathname and route params
routePathThe matched route pattern, such as /album/:id
transitionName / prevTransitionNameThe resolved transition names

Outside a Screen the fields hold empty values instead of being missing, so a header or tab bar beside a Slot can read them safely.

Transition factories

NameWhat it isPage
createTransition / createRawTransitionScreen transitions, registered with Router transitions
createDecorator / createRawDecoratorA dim or color wash drawn over the screens during a transition, registered with Router decorators and selected by a transition's decoratorName
createPartTransition / createRawPartTransitionPart transitions, registered with Router partTransitions
createMorphTransition / createRawMorphTransitionShared-element morphs, registered with Router morphTransitions

Presets

NameWhat it isPage
cupertino (default), material, layout, noneBuilt-in screen transitions, selected by name
overlayBuilt-in decorator
shared (default), text, zoomBuilt-in morphs, selected with <Morph name>

History drivers

NameWhat it isPage
Router history="browser"The default. Reads and writes window.history, so the URL and browser back work, even when nested
Router history="memory"An isolated in-memory stack that never touches the URL or browser back
Router createDriverOverrides the browser backend; receives the Router's key and returns a HistoryDriver. Ignored with history="memory"
createBrowserHistoryDriver(routerKey?)The default browser driver, for wrapping in createDriver (for example a locale prefix)

Types

NameWhat it isPage
RegisterRouteAugment it to type paths for push and useParams
RegisterRouterAugment it to type router targets
RegisterTransition, RegisterDecorator, RegisterPartTransition, RegisterMorphTransitionAugment them to type your own transition names
RouterTarget, RouterName, RouterScopeKeyword, UseNavigateOptionsValues accepted by useNavigate({ router })
TransitionName, DecoratorName, PartTransitionName, MorphTransitionNameRegistered names plus the built-ins
PartTransitionOptions, MorphTransitionOptionsOptions of part and morph transitions
SwipeOptions, SwipeStop, SwipeInfoSwipe configuration, styles applied at set points along the drag, and the gesture data passed to callbacks
SlotProps, ScreenProps, PartProps, LayerProps, MorphPropsComponent props
HistoryDriver, HistoryNavEventThe history backend contract
Low-level exportsDetails

Apps rarely need these. They exist for custom hosts, tooling, and transitions that decide for themselves what happens when a swipe is released.

NameWhat it is
ScreenMotionThe moving container Screen renders. Use it only when replacing the freeze policy
ScreenFreezeSuspends a covered screen with React's Activity, keeping state and scroll
ScreenDecoratorThe box over a screen that a transition's decorator renders into
ScreenContext, ScreenContextPropsThe context useScreen reads
RouterScopeProviderHosts a Router's stores above it, so siblings outside the Router can read and drive them. Browser history only
useStores, useHistoryStore, useNavigateStore, useScreenStoreImperative and selector access to a Router's stores
FlemoStores, RouterScopeNode, SharedBarId, SharedBarMetadata, SharedBarPresence, SharedBarsMetadataStore and shared-bar types
partTransitionMap, morphTransitionMapThe registries of part and morph transitions
DEFAULT_COMMIT_FRACTION, DEFAULT_COMMIT_VELOCITYThe default distance fraction and velocity that decide whether a released swipe goes back, used when a transition sets neither. For an onEnd that keeps the default rule

@flemo/core is the framework-agnostic engine behind @flemo/react. It also exports the preset objects (cupertino, material, layout, none, overlay, shared, textMorph, zoomMorph), createMemoryHistoryDriver and the engine APIs a framework binding uses.

Edit on GitHub