close
Rspress
  • English

      • Banner

      Warning

      This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

      Banner displays a notification banner at the top of the page, supporting link navigation and close functionality.

      Usage

      Use the Banner component through custom Layout:

      theme/index.tsx
      import { Layout as BasicLayout, Banner } from '@rspress/core/theme';
import { useLang } from '@rspress/core/runtime';

const Layout = () => {
  const lang = useLang();
  return (
    <BasicLayout
      beforeNav={
        <Banner
          href="/"
          message={
            lang === 'en'
              ? '🚧 Rspress 2.0 document is under development'
              : '🚧 Rspress 2.0 文档还在开发中'
          }
        />
      }
    />
  );
};

export { Layout };

      Props

      type BannerProps = {
  /** Whether to display the Banner, defaults to true */
  display?: boolean;
  /** Custom CSS class name */
  className?: string;
} & (
  | {
      /** Storage method for closed state, defaults to 'localStorage' */
      storage?: 'localStorage' | 'sessionStorage' | false;
      /** Storage key for closed state, defaults to 'rp-banner-closed' */
      storageKey?: string;
      /** Link to navigate when clicked */
      href: string;
      /** Message content to display */
      message: string | ReactNode;
    }
  | {
      /** Fully customized content */
      customChildren: ReactNode;
    }
);

      display

      • Type: boolean
      • Default: true

      Controls whether the Banner is displayed.

      storage

      • Type: 'localStorage' | 'sessionStorage' | false
      • Default: 'localStorage'

      How to store the closed state after user closes the Banner. Set to false to disable storage.

      storageKey

      • Type: string
      • Default: 'rp-banner-closed'

      Storage key for the closed state.

      href

      • Type: string

      Link to navigate when clicking the Banner.

      message

      • Type: string | ReactNode

      Message content displayed in the Banner.

      customChildren

      • Type: ReactNode

      Fully customized Banner content. When using this property, href and message will be ignored.