API Reference

`@flemo/react`의 안정적인 공개 API 표면과 각 항목을 설명하는 페이지

컴포넌트

Export	요약	패키지	자세히
`Router`	루트 컨테이너. 활성 화면을 렌더해요.	`@flemo/react`	Router
`Route`	경로(또는 경로 배열)를 element와 연결해요.	`@flemo/react`	Router
`Screen`	라우트별 화면 컨테이너. 앱·내비·안전 영역 슬롯을 가져요.	`@flemo/react`	Screen
`LayoutScreen`	화면 사이 `layoutId` 모핑을 지원하는 Screen 변형.	`@flemo/react-layout`	LayoutScreen
`LayoutConfig`	motion 자식을 현재 화면의 전환 타이밍으로 감싸요.	`@flemo/react-layout`	LayoutScreen

훅

Export	반환	자세히
`useNavigate()`	`{ push, replace, pop }`	Navigation
`useParams<T>()`	현재 라우트의 파라미터 (경로 + 쿼리 병합)	Navigation
`useStep<T>()`	sub-state 전환용 `{ pushStep, replaceStep, popStep }`	Navigation
`useScreen()`	현재 화면의 메타 (`id`, `isActive`, `zIndex` …)	useScreen
`useViewportScrollHeight()`	visualViewport 기반 스크롤 정보. 모바일 키보드 처리에 유용해요.	—

useScreen

useScreen()은 호출한 컴포넌트가 속한 화면의 메타데이터를 반환해요. context에서 읽으므로 <Route> element의 트리 안(활성 화면, 또는 그 아래에 아직 마운트된 화면)에서 호출하세요.

필드	타입	설명
`id`	`string`	화면의 history 엔트리 id
`isActive`	`boolean`	현재(top) 화면인지 여부
`isRoot`	`boolean`	루트 화면(`zIndex` 0)인지 여부
`isPrev`	`boolean`	이전 화면보다 아래에 있는지 여부 (정지된 채 화면 밖)
`zIndex`	`number`	스택 깊이. `0`이 루트, 클수록 최신
`pathname`	`string`	이 화면의 resolved pathname
`params`	`object`	이 화면의 라우트 파라미터
`routePath`	`string`	매칭된 라우트 패턴 (예: `/album/:id`)
`transitionName`	`string`	현재 진행 중인 내비게이션의 전환
`prevTransitionName`	`string`	top 한 칸 아래 화면의 전환
`layoutId`	`string \| number \| null`	전달된 `layoutId` (있다면)

function AlbumHeader() {
  const { isActive, zIndex, params } = useScreen();
  // 이 화면이 활성일 때 다르게 렌더하거나, 깊이를 읽을 수 있어요.
}

전환 팩토리

Export	사용 시점
`createTransition`	여섯 단계 전환 (idle / enter / exit / enterBack / exitBack)
`createRawTransition`	모든 navigate 상태를 직접 제어
`createDecorator`	네 단계 데코레이터 (initial / idle / enter / exit)
`createRawDecorator`	상태별 완전 제어가 가능한 데코레이터

예제는 Transitions에 있어요.

내장 전환 이름

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

내장 데코레이터 이름

"overlay"

타입 레지스트리

인터페이스	용도
`RegisterRoute`	라우트 등록. `navigate.push`, `useParams`의 타입 안전
`RegisterTransition`	커스텀 전환 이름 등록
`RegisterDecorator`	커스텀 데코레이터 이름 등록

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

타입 export

ScreenProps · TransitionName · RegisterTransition · DecoratorName · RegisterDecorator

Peer dependencies

@flemo/react는 react ^19, react-dom ^19만 peer로 요구해요. @flemo/react-layout은 motion ^12를 추가 peer로 가져요. <LayoutScreen>이나 <LayoutConfig>를 쓸 때 같이 설치하세요.

On this page