React 封装 Google Drive Picker

Source: Dev.to

概览

我发布了一个新包 @googleworkspace/drive-picker-react，旨在让在 React 应用中使用 Google Drive Picker 更加简便。
作为底层 @googleworkspace/drive-picker-element Web 组件的创建者，我希望为可能因为手动事件监听和 ref 处理而觉得集成 Web 组件繁琐的 React 开发者提供无缝体验。该包对 Web 组件进行封装，提供了带有属性和事件处理器的标准 React 接口。

特性

• 类型化属性 – 为所有 Picker 选项提供完整的 TypeScript 支持。
• 事件处理 – 使用标准的 onPicked 和 onCanceled 属性，而无需手动添加事件监听器。
• SSR 兼容 – 设计上可在 Next.js 及其他 SSR 框架中使用（通过客户端指令或动态导入）。

安装

npm install @googleworkspace/drive-picker-react

用法

import {
  DrivePicker,
  DrivePickerDocsView,
} from "@googleworkspace/drive-picker-react";

function App() {
  return (
     console.log("Picked:", e.detail)}
      onCanceled={() => console.log("Picker was canceled")}
    >
      
    
  );
}

链接

• NPM 包: https://www.npmjs.com/package/@googleworkspace/drive-picker-react
• GitHub 仓库: https://github.com/googleworkspace/drive-picker-react

© 2025 by Justin Poehnelt is licensed under CC BY‑SA 4.0