Skip to content
Justin Poehnelt

React Wrapper for Google Drive Picker

By , Google Workspace alum Published 1 min read

I’ve published a new package, @googleworkspace/drive-picker-react, to make it easier to use the Google Drive Picker in React applications.

I also created the underlying @googleworkspace/drive-picker-element web component. The React wrapper removes the need to wire up event listeners and refs manually.

This package wraps the web component, providing a standard React interface with props and event handlers.

Features

  • Typed Props: Full TypeScript support for all Picker options.
  • Event Handling: Standard onPicked and onCanceled props instead of adding event listeners.
  • SSR Compatible: Designed to work with Next.js and other SSR frameworks (using client-side directives or dynamic imports).

Usage

Installation

npm install @googleworkspace/drive-picker-react

Example

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

function App() {
  return (
    <DrivePicker
      clientId="YOUR_CLIENT_ID"
      appId="YOUR_APP_ID"
      onPicked={(e) => console.log("Picked:", e.detail)}
      onCanceled={() => console.log("Picker was canceled")}
    >
      <DrivePickerDocsView starred={true} />
    </DrivePicker>
  );
}

More articles