Appearance
useTextDirection
Reactive dir of the element's text
Demo
Usage
tsx
import { useTextDirection } from '@reause/core'
const [dir, setDir] = useTextDirection() // ['ltr' | 'rtl' | 'auto', setter]
// <html dir="rtl"> → dir === 'rtl'
setDir('ltr') // writes dir="ltr" back to <html>Options
By default it targets the <html> tag. Pass a selector to target another element:
tsx
const [mode, setMode] = useTextDirection({ selector: 'body' })With observe: true the hook watches document.querySelector(selector) with a MutationObserver and follows external dir changes:
tsx
const [dir, setDir] = useTextDirection({ observe: true })Type Declarations
ts
export type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto'
export interface UseTextDirectionOptions {
selector?: string;
observe?: boolean;
initialValue?: UseTextDirectionValue;
document?: Document;
}
export type UseTextDirectionReturn = [
dir: UseTextDirectionValue,
setDir: Dispatch<SetStateAction<UseTextDirectionValue>>
]
export function useTextDirection(options?: UseTextDirectionOptions): UseTextDirectionReturnSource
Contributors
