Copy and i18n

Inline strings or your own catalogue.

Inline copy

The default. Fine for a single-locale product.

{ anchor: anchors.q.save, title: "Save it", body: "Nothing is stored until you do." }

Your own catalogue

Use titleKey and bodyKey instead, and hand the provider a resolver. Cairn does not ship an i18n library and does not care which you use.

{ anchor: anchors.q.save, titleKey: "tour.save.title", bodyKey: "tour.save.body" }

providers.tsx

const t = useTranslations();          // next-intl
// const { t } = useTranslation();    // react-i18next

<CairnProvider flows={flows} router={router} translate={(key) => t(key)}>

Overlay labels

The buttons are separate from step copy, since they are the same on every step.

<CairnOverlay
  labels={{
    next: t("common.next"),
    back: t("common.back"),
    skip: t("common.skip"),
    done: t("common.done"),
    counter: (current, total) => t("tour.counter", { current, total }),
  }}
/>

Writing good step copy

Titles under six words. Bodies at most two short sentences. Always name the action: “Click Create manually” beats “you can create a question here”.