Package Exports

use-dropbox-chooser
use-dropbox-chooser/es/index.js
use-dropbox-chooser/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-dropbox-chooser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-dropbox-chooser

react hook for dropbox file chooser

Install

with yarn:

yarn add use-dropbox-chooser

with npm:

npm i use-dropbox-chooser

Usage

import { useDropboxChooser } from 'use-dropbox-chooser'

function YourComponent() {
  const { open, isOpen } = useDropboxChooser({
    appKey: 'YOUR_DROPBOX_APP_KEY',
    chooserOptions: { multiple: true, linkType: 'direct' },
    onSelected: files => {
      console.log(files)
    },
  })

  return (
    <button onClick={open} disabled={isOpen}>
      Choose from Dropbox
    </button>
  )
}

OR:

import { useDropboxChooser } from 'use-dropbox-chooser'

function YourComponent() {
  const { open, isOpen } = useDropboxChooser({
    appKey: 'YOUR_DROPBOX_APP_KEY',
    chooserOptions: { multiple: true, linkType: 'direct' },
  })

  return (
    <button
      onClick={async () => {
        try {
          const files = await open()
          console.log(files)
        } catch (e) {
          // if closed: e === undefined
        }
      }}
      disabled={isOpen}
    >
      Choose from Dropbox
    </button>
  )
}

You can also use DropboxAppProvider to avoid passing appKey on each usage:

// App.tsx
import { DropboxAppProvider } from 'use-dropbox-chooser'

function App() {
  return (
    <DropboxAppProvider value="YOUR_DROPBOX_APP_KEY">
      <YourComponent />
    </DropboxAppProvider>
  )
}

// YourComponent.tsx
import { useDropboxChooser } from 'use-dropbox-chooser'

function YourComponent() {
  const { open, isOpen } = useDropboxChooser({
    // no need for `appKey`.
    chooserOptions: { multiple: true, linkType: 'direct' },
  })

  // ... similar to other examples
}