Drive Picker Element

Why it's ranked here

The design is focused and practical. It offers native custom elements plus a dedicated React wrapper, typed properties and events, multiple browser bundles, and generated reference documentation. The implementation also accounts for script-loading races and Content Security Policy attributes, which addresses integration details that often become application bugs.

What's good

Framework-neutral elements keep the core integration reusable, while React users receive components and managed event subscriptions. Type declarations accompany the ESM build. The package emits minified and unminified IIFE builds, source maps, and generated declarations. Script injection preserves nonce, integrity, and crossorigin attributes from an existing matching script.

Tradeoffs

This is browser infrastructure, not a standalone picker service. It depends on Google-hosted API and Identity scripts, browser globals, OAuth configuration, and custom-element support. Script loading may append and execute another copy of an already present script to avoid unresolved load races. The React wrapper currently models document views as its supported children.

How to use it well

Use it when a web application needs declarative Drive selection with typed results, especially when one integration must serve plain web components and React. Let the wrapper manage React listener cleanup, and handle picked, canceled, and OAuth outcomes explicitly. It does not remove the need to supply application credentials or address issues in the underlying Google Picker separately.

Observed

License

Apache License 2.0 headers appear throughout the supplied source files.

Primary language

TypeScript, including TSX for the React package.

Package surface

Monorepo containing @googleworkspace/drive-picker-element and @googleworkspace/drive-picker-react.

Interfaces

Browser custom-element library with a React component wrapper and typed custom events.

Build outputs

IIFE and ESM JavaScript builds, minified variants, source maps, and TypeScript declarations.

Platform target

Browsers supporting Custom Elements v1 and default browser targets; the ESM build targets ES6.

Tooling

pnpm workspace tooling with Turbo, tsup, Vitest, Storybook, Biome, Prettier, Changesets, and Husky.