#useI18n

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

Rspress provides the useI18n 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>;
};

If you are using i18n.json, you can configure paths in tsconfig.json for better type hinting:

{
  "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 text keys defined in i18n.json.