Directionstandard

글자 방향(direction: `ltr` 왼쪽에서 오른쪽, `rtl` 오른쪽에서 왼쪽)을 Base UI 부품 전체에 알리는 제공자(provider)입니다. shadcn base-nova 의 `direction` 은 `@base-ui/react/direction-provider` 를 그대로 다시 내보냅니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/direction

글자 방향(direction: ltr 왼쪽에서 오른쪽, rtl 오른쪽에서 왼쪽)을 Base UI 부품 전체에 알리는 제공자(provider)입니다. shadcn base-nova 의 direction 은 @base-ui/react/direction-provider 를 그대로 다시 내보냅니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/direction

사용

tsx

import { DirectionProvider, useDirection } from "@/components/ui/direction";
function CurrentDirection() {  const direction = useDirection();  return <p>{direction}</p>;}
export function RtlSection({ children }: { children: React.ReactNode }) {  return (    <DirectionProvider direction="rtl">      <div dir="rtl">        <CurrentDirection />        {children}      </div>    </DirectionProvider>  );}

속성

Base UI 문서 와 shadcn 문서 를 봅니다.

이름	형	기본값	뜻
`DirectionProvider` 의 `direction`	`"ltr" \| "rtl"`	`"ltr"`	자손 Base UI 부품이 따를 방향
`useDirection()`	`() => "ltr" \| "rtl"`		가장 가까운 제공자의 방향. 문자열을 바로 돌려줍니다

기본으로 지키는 것

제공자가 없거나 direction 을 주지 않으면 useDirection() 은 "ltr" 입니다. 던지지 않습니다.
안쪽 제공자가 바깥 제공자의 값을 덮습니다.
제공자는 요소를 그리지 않습니다. 문서의 dir 속성은 직접 설정합니다.

접근성

키보드 조작은 없습니다. rtl 에서는 Base UI 의 좌우 방향키 동작(탭·메뉴·슬라이더 등)이 뒤집힙니다.

의존

npm: @base-ui/react. 다른 아이템: 없음.