Skip to Content

useRTL

See source on Github

Return a boolean indicating whether the page is in RTL (right-to-left) mode with the option to observe a specific element.

  • @param options - Configurable options
  • @returns - true if document or local directionality is RTL
  • false if document or local directionality is LTR
  • undefined on initial render / server-side

Example

const ref = useRef<HTMLUListElement>(null) const isGlobalRTL = useRTL() const isLocalRTL = useRTL({ ref }) return ( <ul ref={ref} dir="rtl"> <li>Global: {isGlobalRTL ? 'RTL' : 'LTR'}</li> <li>Local: {isLocalRTL ? 'RTL' : 'LTR'}</li> </ul> )