React 的 OverlayScrollbars

这是官方的 OverlayScrollbars React 包装器。

安装

npm install overlayscrollbars-react

同级依赖

React 的 OverlayScrollbars 有以下同级依赖：

• 原生 JavaScript 库：overlayscrollbars

npm install overlayscrollbars

• React 框架：react

npm install react

使用方法

第一步是将 CSS 文件导入到您的应用中：

import "overlayscrollbars/overlayscrollbars.css";

注意：如果路径 'overlayscrollbars/overlayscrollbars.css' 无法使用，请使用 'overlayscrollbars/styles/overlayscrollbars.css' 作为 CSS 文件的导入路径。

组件

主要的入口点是 OverlayScrollbarsComponent，可以在您的应用程序中作为一个组件使用：

import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

// ...

<OverlayScrollbarsComponent defer>example content</OverlayScrollbarsComponent>;

属性

该组件接受常规元素（如 div 和 span）的所有属性。
此外，它还有自定义的可选属性：

• element：接受一个表示根元素标签的 string。
• options：接受一个表示 OverlayScrollbars 选项的 object。
• events：接受一个表示 OverlayScrollbars 事件的 object。
• defer：接受一个 boolean 或 object。将初始化推迟到浏览器空闲时。

注意：这些属性都不需要被记忆化。

注意：强烈建议尽可能使用 defer 选项，将初始化推迟到浏览器的空闲期。

// 示例用法
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: "scroll" } }}
  events={{
    scroll: () => {
      /* ... */
    },
  }}
  defer
/>

Ref

OverlayScrollbarsComponent 的 ref 将为您提供一个对象，您可以通过该对象访问 OverlayScrollbars 的 instance 和组件的根 element。
ref 对象有两个属性：

• osInstance：一个返回 OverlayScrollbars 实例的函数。
• getElement：一个返回根元素的函数。

Hook

如果 OverlayScrollbarsComponent 不够用，您还可以使用 useOverlayScrollbars 钩子：

import { useOverlayScrollbars } from "overlayscrollbars-react";

// 示例用法
const Component = () => {
  const ref = useRef();
  const [initialize, instance] = useOverlayScrollbars({
    options,
    events,
    defer,
  });

  useEffect(() => {
    initialize(ref.current);
  }, [initialize]);

  return <div ref={ref} />;
};

该钩子用于高级用法，让您可以控制整个初始化过程。如果您想将其与其他插件（如 react-window 或 react-virtualized）集成，这将非常有用。

挂钩将在组件卸载时自动销毁实例。

参数

参数是可选的，与 OverlayScrollbarsComponent 类似。 它是一个具有可选属性的 object：

• options：接受一个表示 OverlayScrollbars 选项的 object。
• events：接受一个表示 OverlayScrollbars 事件的 object。
• defer：接受一个 boolean 或 object。将初始化推迟到浏览器空闲时。

返回值

useOverlayScrollbars 钩子返回一个包含两个值的 tuple：

• 第一个值是 initialization 函数，它接受一个参数，即 InitializationTarget。
• 第二个值是一个函数，返回当前的 OverlayScrollbars 实例，如果未初始化则返回 null。

注意：两个函数的标识是稳定的，不会改变，因此可以安全地用于任何依赖数组中。

License

MIT