#useI18n

useI18n lets you read localized text inside custom components using the configured source. For setup details, see config.i18nSource.

Rspress provides useI18n this hook to get the internationalized text, the usage is as follows:

import { useI18n } from '@rspress/core/runtime';

const MyComponent = () => {
  const t = useI18n();

  return <div>{t('gettingStarted')}</div>;
};

For better type hinting, you can configure paths in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "i18n": ["./i18n.json"]
    }
  }
}

Then use it like this in the component:

import { useI18n } from '@rspress/core/runtime';

const MyComponent = () => {
  const t = useI18n<typeof import('i18n')>();

  return <div>{t('gettingStarted')}</div>;
};

This way you get type hints for all literal keys defined in i18n.json.