Current namespace file (examples.json)

Adding an arbitrary string

Useful for; using translations as properties eg for page meta tags

// with raw i18n library
i18next.setDefaultNamespace('examples');
i18next.t('title');

Outputs: This is a string

---

Markup

import { Trans } from 'astro-i18next/components';
import i18next from 'i18next';
i18next.setDefaultNamespace('examples');
---
<Trans i18nKey="with_tags">
  <u></u>
</Trans>
  

---

Using arrays

<ul style={{ display: 'flex', flexDirection: 'row', gap: '10px' }}>
  {
    i18next
      .t('with_an_array', { returnObjects: true })
      .map((item) => <li>{item}</li>)
  }
</ul>
  

Outputs:

• This is an
• array of
• items

---

With interpolation

{
  i18next.t('this_is_interpolated', { reason: 'he is the best' })
}

Outputs: The best thing about James is he is the best

List with HTML

You have to do this in a .jsx file, it wont work in an .astro file because it's too jsxy

<ul>
  {i18next
    .t('with_an_array_with_tags', { returnObjects: true })
    .map((item) => (
      <li key={item}>
        <Trans
          components={{
            bold: <strong />
          }}
        >
          {item}
        </Trans>
      </li>
    ))}
</ul>

  

Outputs:

• This is a string with HTML tags inside
• And so is this