useResolvedText
Resolve a LocalizedText | ReactNode value into a ReactNode. Handles string interpolation, i18n key lookup, and ReactNode pass-through with one call.
Unified text pipeline used across @tour-kit/react, @tour-kit/hints, and @tour-kit/announcements. Given a LocalizedText | ReactNode, returns a ReactNode ready to render:
string→ interpolated againstvars('Hi {{user.name}}'){ key }→ translated viauseT- any other
ReactNode→ returned as-is (JSX pass-through)
Usage
import { useResolvedText } from '@tour-kit/core';
function StepBody({ body }: { body: LocalizedText | React.ReactNode }) {
const resolved = useResolvedText(body);
return <div>{resolved}</div>;
}By default vars falls back to useSegmentationContext().userContext, so any consumer that wires userContext for audience targeting gets interpolation against the same shape for free.
const resolved = useResolvedText('Welcome back, {{user.name}}');
// With userContext = { user: { name: 'Ada' } } → "Welcome back, Ada"Signature
function useResolvedText(
value: ReactNode | LocalizedText | undefined,
vars?: Record<string, unknown>
): ReactNode| Param | Type | Description |
|---|---|---|
value | ReactNode | LocalizedText | undefined | Source value. Returned as-is for non-string non-key inputs. |
vars | Record<string, unknown> | Optional override; defaults to useSegmentationContext().userContext. |
This is a hook — call it from a component body, never from an event handler or .map() callback. For string outputs (aria-label, Dialog.Title), use useResolveLocalizedText — it returns a memoized (value) => string resolver you can call anywhere.
Related
- useResolveLocalizedText — string-only variant for ARIA attributes
- useLocale — read raw locale context
- i18n guide
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.