Keep Your UI Copy in One Place

Copy written inline drifts: the same label gets worded three ways, and changing a sentence starts with a grep. Put all copy in one object instead, grouped by the component that shows it, and read it through a small t bound to that group. #typescript turns the object's shape into the set of valid keys, so t('sayHi') autocompletes and t('sayHello') doesn't compile.

@itsnas footer.tsx

codefooter.tsx

// @src/code/copy
const t = copy('Footer')
 
export function Footer({ year }: { year: number }) {
  return (
    <footer>
      <a href="/contact">{t('sayHi')}</a>
      <p>{t('copyright', { year })}</p>
    </footer>
  )
}

main

Nas (@itsnas)

const messages = {
  Footer: {
    sayHi: 'Say hi',
    copyright: 'Copyright © {year}',
  },
  Contact: {
    name: {
      question: 'What is your name?',
      error: 'Tell us your name to continue.',
    },
  },
} as const
 
type Messages = typeof messages
 
// Every leaf as a dotted path: 'name.question' | 'name.error'
type KeyPath<T, Prefix extends string = ''> = {
  [K in keyof T & string]: T[K] extends string
    ? `${Prefix}${K}`
    : KeyPath<T[K], `${Prefix}${K}.`>
}[keyof T & string]
 
export function copy<N extends keyof Messages>(namespace: N) {
  return (
    key: KeyPath<Messages[N]>,
    vars?: Record<string, string | number>,
  ): string => {
    let str = (key as string)
      .split('.')
      .reduce<unknown>(
        (node, part) => (node as Record<string, unknown>)?.[part],
        messages[namespace],
      ) as string
 
    if (vars) {
      for (const [name, value] of Object.entries(vars)) {
        str = str.replaceAll(`{${name}}`, String(value))
      }
    }
 
    return str
  }
}

main

Nas (@itsnas)