# react-google-drive-picker

> React google drive picker api

Latest version **1.2.2** (published 2023-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-google-drive-picker
pnpm add react-google-drive-picker
yarn add react-google-drive-picker
bun add react-google-drive-picker
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2023-05-03 |
| First published | 2021-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | Jose-cd |
| Maintainers | everafterbreak |
| Keywords | react, google, drive, picker |

## Links

- npm: https://www.npmjs.com/package/react-google-drive-picker
- Repository: https://github.com/Jose-cd/React-google-drive-picker
- Homepage: https://github.com/Jose-cd/React-google-drive-picker#readme
- Issues: https://github.com/Jose-cd/React-google-drive-picker/issues
- npm.io page: https://npm.io/package/react-google-drive-picker

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2023-05-03
- 1.2.1 — 2023-04-07
- 1.2.0 — 2022-06-04
- 1.1.9 — 2022-06-04
- 1.1.8 — 2022-05-28
- 1.1.7 — 2022-05-27
- 1.1.6 — 2022-05-17
- 1.1.5 — 2022-05-16
- 1.1.4 — 2021-08-15
- 1.1.3 — 2021-05-24
- 1.1.2 — 2021-05-24
- 1.1.1 — 2021-05-21
- 1.1.0 — 2021-05-20
- 1.0.9 — 2021-05-19
- 1.0.8 — 2021-05-17
- … 7 more at https://npm.io/package/react-google-drive-picker/versions

## README

# React-google-drive-picker

Google drive picker

## Description

Google drive picker custom hook.

## Getting Started

### Installing

With npm
```
npm i react-google-drive-picker
```
With yarn
```
yarn add react-google-drive-picker
```

### Usage

```js
import  { useEffect } from 'react';
import useDrivePicker from 'react-google-drive-picker'


function App() {
  const [openPicker, authResponse] = useDrivePicker();  
  // const customViewsArray = [new google.picker.DocsView()]; // custom view
  const handleOpenPicker = () => {
    openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      viewId: "DOCS",
      // token: token, // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      // customViews: customViewsArray, // custom view
      callbackFunction: (data) => {
        if (data.action === 'cancel') {
          console.log('User clicked cancel/close button')
        }
        console.log(data)
      },
    })
  }


  
  return (
    <div>
        <button onClick={() => handleOpenPicker()}>Open Picker</button>
    </div>
  );
}

export default App;
```


## Picker configuration props

## Picker Props

|    params        |   value  |  default value   |          description          |
|------------------|----------|------------------|-------------------------------|
| callbackFunction  |function    |  REQUIRED       |Callback function that will be called on picker action |
|    clientId      |  string  |     REQUIRED     |      Google client id         |
|    developerKey  |  string  |     REQUIRED     |      Google developer key     |
|    disableDefaultView  |  boolean  |     false     |      disables default view     |
|    viewId        |  string  |     DOCS         |         ViewIdOptions         |
|    viewMimeTypes |  string  |     optional     |Comma separated mimetypes. Use this in place of viewId if you need to filter multiple type of files. list: https://developers.google.com/drive/api/v3/mime-types.|
|setIncludeFolders|  boolean  |     false        |Show folders in the view items.|
|setSelectFolderEnabled|boolean|     false       |Allows the user to select a folder in Google Drive.|
|   token          |  string  |     optional     | access_token to skip auth part|
| setOrigin        |  string  |     optional     | Sets the origin of the Google Picker dialog |
|  multiselect     |  boolean |     false        | Enable picker multiselect     |
| supportDrives    |  boolean |     false        |    Support shared drives      |
| showUploadView   |  boolean |     false        |     Enable upload view        |
| showUploadFolders|  boolean |     false        |Enable folder selection(upload)|
| setParentFolder  |  string  |     disabled     |  Drive folder id to upload    |
| customViews      |ViewClass[]|    optional     |  Array of custom views you want to add to the picker|
| customScopes      |string[]|    ['https://www.googleapis.com/auth/drive.readonly']     |  Array of custom scopes you want to add to the picker|
| locale           |string    |    en            | List of supported locales https://developers.google.com/picker/docs#i18n|


  ## viewId options
|    option            |         description             |
|----------------------|---------------------------------|
|    DOCS            |All Google Drive document types. |
|  DOCS_IMAGES          |Google Drive photos.             
|DOCS_IMAGES_AND_VIDEOS |Google Drive photos and videos.  |
|    DOCS_VIDEOS        |Google Drive videos.             |
|    DOCUMENTS          |	Google Drive Documents.         |
|    FOLDERS            |Google Drive Folders.            |
|    DRAWINGS           |Google Drive Drawings.           |
|    FORMS              |	Google Drive Forms.             |
|    PDFS               |PDF files stored in Google Drive.|
|    SPREADSHEETS       |Google Drive Spreadsheets.       |

## Author

[@Jose medina](https://www.linkedin.com/in/jos%C3%A9-medina-56479a128/)


## Acknowledgments
Inspiration, code snippets
* [sdoomz](https://github.com/sdoomz/react-google-picker)
* [obonyojimmy](https://github.com/obonyojimmy/react-drive-picker#readme)

---
_Source: https://npm.io/package/react-google-drive-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._