Runtime API#

Rspress exposes some runtime APIs, which is convenient for you to do some custom logic.

usePageData#

Get the data of the current page, and the return value is an object, which contains all the data of the current page.

import { usePageData } from 'rspress/runtime';

function MyComponent() {
  const pageData = usePageData();
  return <div>{pageData.page.title}</div>;
}

useLang#

Get the current language, the return value is a string, which is the current language.

import { useLang } from 'rspress/runtime';

function MyComponent() {
  const lang = useLang();
  // lang === 'zh-CN'
  return <div>{lang}</div>;
}

useVersion#

Get the current version, the return value is a string, which is the current version.

import { useVersion } from 'rspress/runtime';

export default () => {
  const version = useVersion();
  return <div>Current version: {version}</div>;
};

useDark#

Whether it is dark mode currently, the return value is a boolean value.

import { useDark } from 'rspress/runtime';

function MyComponent() {
  const dark = useDark();
  return <div>{dark}</div>;
}

useI18n#

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

import { useI18n } from 'rspress/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/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.

See more in Internationalization.

Router Hook#

The framework internally uses and re-exports all APIs of react-router-dom, you can use it like this:

import { useLocation } from 'rspress/runtime';

function MyComponent() {
  const location = useLocation();
  return <div>{location.pathname}</div>;
}