@valosan/react-google-picker

React google picker
===================
Simple react wrapper for Google Picker API

Installation
============
``
npm install react-google-picker
`

Usage
=====
`
developerKey={'your-developer-key'}
scope={['https://www.googleapis.com/auth/drive.readonly']}
onChange={data => console.log('on change:', data)}
onAuthFailed={data => console.log('on auth failed:', data)}
multiselect={true}
navHidden={true}
authImmediate={false}
mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
query={'a query string like .txt or fileName'}
viewId={'DOCS'}>


`

Authentication token

You might want to get the Oauth token in order to use it later, for example
in order to download the selected file.
You can do so by using onAuthenticate:

`
developerKey={'your-developer-key'}
scope={['https://www.googleapis.com/auth/drive.readonly']}
onChange={data => console.log('on change:', data)}
onAuthenticate={token => console.log('oauth token:', token)}
onAuthFailed={data => console.log('on auth failed:', data)}
multiselect={true}
navHidden={true}
authImmediate={false}
mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
viewId={'DOCS'}>


`

Custom build method


You can override the default build function by passing your custom function which receives two arguments:
- google: a reference to the window.google object.
- access_token: which you will need to pass to setOAuthToken method.
`
developerKey={DEVELOPER_KEY}
scope={SCOPE}
onChange={data => console.log('on change:', data)}
onAuthFailed={data => console.log('on auth failed:', data)}
multiselect={true}
navHidden={true}
authImmediate={false}
viewId={'FOLDERS'}
createPicker={ (google, oauthToken) => {
const googleViewId = google.picker.ViewId.FOLDERS;
const docsView = new google.picker.DocsView(googleViewId)
.setIncludeFolders(true)
.setMimeTypes('application/vnd.google-apps.folder')
.setSelectFolderEnabled(true);

const picker = new window.google.picker.PickerBuilder()
.addView(docsView)
.setOAuthToken(oauthToken)
.setDeveloperKey(DEVELOPER_KEY)
.setCallback(()=>{
console.log('Custom picker is ready!');
});

picker.build().setVisible(true);
}}
>
Click

`
This example creates a picker which shows folders and you can select folders.

$3

You can also simply further customize the picker that was built with the props you specified.
`
developerKey={DEVELOPER_KEY}
scope={SCOPE}
onChange={data => console.log('on change:', data)}
onAuthFailed={data => console.log('on auth failed:', data)}
authImmediate={false}
viewId={'FOLDERS'}
customizePicker={ (picker, { namespace, view, buildView }) => {
// picker = the instance of PickerBuilder with all props opions applied
// namespace = reference to window.google.picker namespace
// view = the instance of view specified by the viewId prop
// buildView = function to build additional views (handles sub-classing views)

// Add additonal features
picker.enableFeature(namespace.Feature.SIMPLE_UPLOAD_ENABLED)
picker.enableFeature(namespace.Feature.SUPPORT_TEAM_DRIVES)
}}
>
Click

`
This example creates a picker which has uploading and team drives enabled.


Demo
====
`
npm install
npm start
open http://localhost:8080
``

$3

$3