@geniux/google-drive-picker-react
v1.0.0
Published
A React integration for Google Drive Picker, leveraging @geniux/google-drive-picker-core for Google Identity Services and Google Drive Picker functionality.
Downloads
149
Readme
@geniux/google-drive-picker-react
A React integration for Google Drive Picker, leveraging @geniux/google-drive-picker-core for Google Identity Services and Google Drive Picker functionality.
This package provides an easy-to-use setup for React applications to enable file selection from Google Drive.
Features
- Easy OAuth Initialization: Leverages Google Identity Services for secure OAuth token handling.
- Google Drive Picker with React Hooks: Simplifies integration with hooks and context providers.
- Typed Interfaces: Includes TypeScript types for Google Picker and OAuth, including Google Drive API scopes.
- Multi-Select Support: Allows selection of multiple files from Google Drive.
Installation
To install @geniux/google-drive-picker-react, use your preferred package manager:
pnpm add @geniux/google-drive-picker-react
or
npm install @geniux/google-drive-picker-react
or
yarn add @geniux/google-drive-picker-react
Basic Usage
Wrap Your App with the Provider
Wrap your app with the GoogleDrivePickerProvider, passing in your clientId and apiKey.
import { GoogleDrivePickerProvider } from '@geniux/google-drive-picker-react';
const App = () => (
<GoogleDrivePickerProvider clientId="YOUR_GOOGLE_CLIENT_ID" apiKey="YOUR_GOOGLE_API_KEY">
<YourComponent />
</GoogleDrivePickerProvider>
);
Using the Picker in Your Component
Use the useGoogleDrivePicker hook to open the Google Drive Picker and manage selected files.
import { useGoogleDrivePicker } from '@geniux/google-drive-picker-react';
const YourComponent = () => {
const { openPicker, selectedFiles } = useGoogleDrivePicker({
allowMultiSelect: true,
scopes: ['https://www.googleapis.com/auth/drive.file'], // This scope is already default for the picker, but you can define others.
});
return (
<div>
<button onClick={openPicker}>Open Google Drive Picker</button>
<ul>
{selectedFiles.map((file) => (
<li key={file.id}>{file.name}</li>
))}
</ul>
</div>
);
};
Next.js Compatibility
For Next.js users, you may encounter SSR (Server-Side Rendering) issues due to the way Next.js handles client-side scripts in packages that use barrel files (index files that re-export from multiple modules).
Since this package uses barrel files, it can lead to Next.js attempting to load client-specific scripts during SSR, resulting in errors or unintended behavior.
To mitigate this, add the following configuration to next.config.js. This setting tells Next.js to optimize the import of @geniux/google-drive-picker-react so that client-side modules are correctly handled as client-only, preventing SSR errors:
// next.config.js|mjs|ts
module.exports = {
experimental: {
optimizePackageImports: ['@geniux/google-drive-picker-react'],
},
};
With this configuration, Next.js will avoid attempting to load client-side scripts server-side, ensuring the Google scripts and Picker functionality load properly when rendered on the client.
Options and Configurations
GoogleDrivePickerProvider Props
- clientId (string): Google API client ID for OAuth.
- apiKey (string): Google API key for Drive Picker.
useGoogleDrivePicker Options
- allowMultiSelect (boolean): Allow multi-selection of files.
- scopes (array of GoogleDriveScope): OAuth scopes for Google Drive access, defaults to ['https://www.googleapis.com/auth/drive.file'].
Types and Configuration Options
Refer to the types for detailed type definitions and additional configuration options.
Also, check the types in @geniux/google-drive-picker-core for more details on OAuth configurations.
License
MIT