useDirection

Returns the resolved text direction ('ltr' or 'rtl') and a convenience isRTL flag. The value comes from TourKitProvider's dir prop — when set to 'auto', the provider resolves it from document.dir on mount.

Use this hook in tour cards, hint hotspots, and custom UI that needs to mirror layout for RTL languages.

Usage

import { useDirection } from '@tour-kit/core';

function TourArrow() {
  const { isRTL } = useDirection();
  return <span aria-hidden>{isRTL ? '←' : '→'}</span>;
}

import { useDirection } from '@tour-kit/core';

function MirroredCard() {
  const { direction } = useDirection();
  return <div dir={direction} className="card">{/* ... */}</div>;
}

Return Value

useDirection requires a <TourKitProvider> in the tree — it will throw otherwise.

Related

• useTourKitContext — read the full context that useDirection is a thin wrapper over.
• <TourKitProvider> — the provider whose dir prop this hook resolves.
• i18n guide — patterns for RTL languages and translated tour copy.