Copy and i18n

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. cairnkit 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" }

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"),
    close: t("common.close"),
    done: t("common.done"),
    counter: (current, total) => t("tour.counter", { current, total }),
  }}
/>

close labels the X in the corner and is deliberately separate from skip. They shared one label until 0.10, which told a screen-reader user they were pressing Skip when the control beside it was also Skip. They are different acts as well as different buttons — cairnkit reports which one ended the tour.

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”.