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

    Install

    npm i react-cloud-chooser

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    7

    Last publish

    Collaborators

    • heshamhh