react-cloud-chooser

1.0.0 • Public • Published

react-cloud-chooser

react implementation for Google Drive Picker, OneDrive File Picker, Dropbox Chooser API

NPM JavaScript Style Guide

Description

react component wrapper for all cloud file storage services Dropbox, Google Drive picker, and OneDrive, which lazy loads the scripts needed only once you press the related buttons.

Install

npm

npm install --save react-cloud-chooser

yarn

yarn add react-cloud-chooser

Google Drive

It popups the login first then open google driver picker.

import React from 'react'

import { canOpenGoogleDrive } from 'react-cloud-chooser'

const GoogleDriveBtn = ({ openGoogleDrive, isGoogleDriveLoading }) => (
  <button onClick={openGoogleDrive}>
    Google Drive
    {isGoogleDriveLoading && <span>...</span>}
  </button>
)
const GoogleDriveOpenBtn = canOpenGoogleDrive(GoogleDriveBtn)

function GoogleDriveExample(props) {
  return (
    <GoogleDriveOpenBtn
      clientId='__client_id__'
      appId='__app_id__'
      developerKey='__developer_key__'
      success={console.log}
      mimeTypes="image/png,image/jpeg,image/jpg"
    />
  )
}
prop value default value description
clientId string REQUIRED Google client id
developerKey string REQUIRED Google developer key
appId string REQUIRED "Project number" on the "IAM & Admin"
mimeTypes string optional Comma separated mimetypes to filter files
multiselect boolean false Enable files multi select
token string optional access token which skips auth/login step
success (files) => {} optional function to call when files selected
cancel function optional function to call when cancel is pressed
scope string[] ['https://www.googleapis.com/auth/drive.readonly'] Array of scopes to auth then use in picker
mapViews function (google) => [new google.picker.DocsView(google.picker.ViewId.DOCS), new google.picker.DocsUploadView()] views to show as tabs in picker
mapPickerBuilder function (pickerBuilder) => pickerBuilder customize picker builder

OneDrive Usage

import React from 'react'

import { canOpenOneDrive } from 'react-cloud-chooser'

const OneDriveBtn = ({ openOneDrive, isOneDriveLoading }) => (
  <button onClick={openOneDrive}>
    OneDrive
    {isOneDriveLoading && <span>...</span>}
  </button>
)
const OneDriveOpenBtn = canOpenOneDrive(OneDriveBtn)

function OneDriveExample(props) {
  return (
    <OneDriveOpenBtn
      clientId='__client_id__'
      action="query"
      success={console.log}
      cancel={() => console.log('cancel pressed')}
    />
  )
}
prop value default value description
clientId string REQUIRED OneDrive client id
action string query action with files selected either "share" or "download" or "query"
multiselect boolean false Enable files multi select
advanced JSON optional advanced customization for the behavior of the picker,
success (files) => {} optional function to call when files selected
cancel function optional function to call when closed without selecting

Dropbox Usage

import React from 'react'

import { canOpenDropbox } from 'react-cloud-chooser'

const DtopboxBtn = ({ openDropbox, isDropboxLoading }) => (
  <button onClick={openDropbox}>
    Dropbox
    {isDropboxLoading && <span>...</span>}
  </button>
)
const DropboxOpenBtn = canOpenDropbox(DtopboxBtn)

function DropboxExample(props) {
  return (
    <DropboxOpenBtn
      appKey="__app_key__"
      linkType='direct' // either direct or preview
      success={console.log}
      extensions='.pdf,.jpg'
    />
  )
}
prop value default value description
appKey string REQUIRED Dropbox app key
linkType string preview either direct or preview for the files selected
extensions string optional file extensions to show only in dropbox
multiselect boolean false Enable files multi select
success (files) => {} optional function to call when files selected
cancel function optional function to call when cancel is pressed

Author and License

MIT © Hesham Hossam heshamhossam57@gmail.com

Package Sidebar

Install

npm i react-cloud-chooser

Weekly Downloads

18

Version

1.0.0

License

MIT

Unpacked Size

113 kB

Total Files

7

Last publish

Collaborators

  • heshamhh