drive-picker-react

Description

This package provides a React wrapper for the @googleworkspace/drive-picker-element web component.

It offers a seamless way to integrate the Google Picker API into your React applications.

Usage

To use the DrivePicker component in your project, import it and use it in your component. See the full examples for more information

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>
  );
}

The underlying web component, @googleworkspace/drive-picker-element, must be imported for the components to work. The @googleworkspace/drive-picker-react package automatically handles this for you.

Component Props

The DrivePicker and DrivePickerDocsView components accept props that correspond to the attributes of the underlying web components.

For a full list of available props, please refer to the documentation for the web components:

• <drive-picker> attributes
• <drive-picker-docs-view> attributes

Events

You can handle events by passing on... props to the DrivePicker component.

The available event handlers are:

• onPicked
• onCanceled
• onOauthError
• onOauthResponse

The event argument is a CustomEvent where the detail property contains the payload from the Google Picker API.

<DrivePicker
  ...
  onPicked={(e) => {
    const data = e.detail;
    console.log(data.docs); // Array of picked documents
  }}
/>

For more details on the event payloads, see the Event Details section of the @googleworkspace/drive-picker-element README.

Reference

This component is a wrapper. For detailed information about the underlying web component's attributes, events, and slots, please refer to the @googleworkspace/drive-picker-element README.

Server-Side Rendering (SSR)

This component is designed to work in client-side environments only, as it relies on browser-specific APIs (like customElements).

The component includes the "use client" directive, which makes it compatible with React Server Components (RSC) in frameworks like Next.js.

However, if you encounter issues with SSR or prefer to be explicit, you can use dynamic imports to disable SSR for this component.

Next.js Example

Using next/dynamic:

import dynamic from 'next/dynamic';

const DrivePicker = dynamic(
  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePicker),
  { ssr: false }
);

const DrivePickerDocsView = dynamic(
  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePickerDocsView),
  { ssr: false }
);

function App() {
  return (
    <DrivePicker ...>
      <DrivePickerDocsView ... />
    </DrivePicker>
  );
}