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.