react-cloud-chooser v1.0.0

react-cloud-chooser

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

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"
    />
  )
}

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')}
    />
  )
}

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'
    />
  )
}

Author and License

MIT © Hesham Hossam heshamhossam57@gmail.com