Google Drive Picker용 React 래퍼

Source: Dev.to

Overview

새 패키지 @googleworkspace/drive-picker-react 를 공개했습니다. 이 패키지는 React 애플리케이션에서 Google Drive Picker 를 보다 쉽게 사용할 수 있게 해줍니다.
기본이 되는 @googleworkspace/drive-picker-element 웹 컴포넌트를 만든 사람으로서, 수동으로 이벤트 리스너를 추가하고 ref 를 관리해야 하는 번거로움을 겪는 React 개발자들을 위해 웹 컴포넌트를 래핑하고, props와 이벤트 핸들러를 제공하는 표준 React 인터페이스를 제공하고자 했습니다.

Features

• Typed Props – 모든 Picker 옵션에 대한 완전한 TypeScript 지원.
• Event Handling – 이벤트 리스너를 직접 추가하는 대신 표준 onPicked 및 onCanceled props 를 사용.
• SSR Compatible – Next.js 및 기타 SSR 프레임워크와 호환되도록 설계 (클라이언트‑사이드 디렉티브 또는 동적 import 사용).

Installation

npm install @googleworkspace/drive-picker-react

Usage

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

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

Links

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

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