Runtime API

Rspress 暴露一些运行时 API，方便你做一些自定义的逻辑。

usePageData

获取当前页面的数据，返回值为一个对象，包含了当前页面的所有数据。

import { usePageData } from 'rspress/runtime';

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

useLang

获取当前语言，返回值为一个字符串，即当前语言。

import { useLang } from 'rspress/runtime';

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

useVersion

在多版本文档的场景下，获取当前文档版本，返回值为一个字符串，即当前版本。

import { useVersion } from 'rspress/runtime';

export default () => {
  const version = useVersion();
  return <div>当前版本：{version}</div>;
};

useDark

当前主题是否为暗黑模式，返回值为一个布尔值。

import { useDark } from 'rspress/runtime';

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

useI18n

框架提供了 useI18n 这个 hook 来获取国际化文本，使用方式如下：

import { useI18n } from 'rspress/runtime';

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

  return <div>{t('getting-started')}</div>;
};

为了获得更好的类型提示，你可以在 tsconfig.json 中配置 paths:

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

然后在组件中这样使用:

import { useI18n } from 'rspress/runtime';

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

  return <div>{t('getting-started')}</div>;
};

这样你就可以获得 i18n.json 中定义的所有文本 key 的类型提示了。

路由 Hook

框架内部使用并重导出了 react-router-dom 的所有 API，你可以这样来使用:

import { useLocation } from 'rspress/runtime';

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

Runtime API#

usePageData#

useLang#

useVersion#

useDark#

useI18n#