Google Drive API hook for React
npm install react-google-picker-hook
Google Drive API hook for React compatible with the newest Google auth API

1. Add the react-google-picker-hook package
``bashyarn
yarn add react-google-picker-hook
`bash
npm
npm install react-google-picker-hook --saveoptional
npm install @types/google.picker --save-dev
`2. Use the package
`ts
import { useGooglePicker } from 'react-google-picker-hook';const [openPicker] = useGooglePicker(
(data: GoogleDrivePickerData, token: string) => {
console.log({ data, token });
if (data?.action === GOOGLE_ACTION.PICKED) {
// Handle file pick
}
},
{
googleAppId: 'googleAppId',
googleAuthClientId: 'googleAuthClientId',
googleAppKey: 'googleAppKey',
},
);
// ...
return ;
`Handling errors (optional)
There are two separate error callback which can be used for error detection.
`ts
const [openPicker] = useGooglePicker(
// ... base callback
{
onAuthFailed: (response: TokenResponse) => {
console.log(response.error_description || response.details); // handle auth error
},
tokenClientConfig: {
error_callback: ({ message, stack, type }: ErrorCallback) => {
console.log({ message, stack, type });
// handle client error
},
},
},
);
`Extending the default config (optional)
$3
-
tokenClientConfig is spread to Google's initTokenClient
- customPickerConfig is used to override the minimal default config used for picker`ts
const [openPicker] = useGooglePicker(
// ... base callback
{
customPickerConfig: {
// custom picker config
},
tokenClientConfig: {
/ custom config for initTokenClient /
},
},
);
`$3
-
appendCustomPickerConfig
- appendCustomViewConfigBoth used to extend the builder pattern of
DocsView and PickerBuilder`ts
const [openPicker] = useGooglePicker(
// ... base callback
{
appendCustomViewConfig: (view) => {
// extend by calling any of the inner setters
return view;
},
appendCustomPickerConfig: (picker) => picker.setSize(300, 300),
},
);
``