React Wrapper for Google Drive Picker

Source: Dev.to

Overview

I’ve published a new package, @googleworkspace/drive-picker-react, to make it easier to use the Google Drive Picker in React applications.
As the creator of the underlying @googleworkspace/drive-picker-element web component, I wanted to provide a seamless experience for React developers who might find integrating web components verbose due to manual event listeners and ref handling. This package wraps the web component, offering a standard React interface with props and event handlers.

Features

• Typed Props – Full TypeScript support for all Picker options.
• Event Handling – Use 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).

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