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
}