Zippin React SDK

React component for the Zippin API.

Install

npm install @zippin/react
# or
yarn add @zippin/react

Setup

First, you'll need an API key. You can create an API key in the Zippin Dashboard.

import { Dropzone } from '@zippin/react';

Usage

Create your custom dropzone:

<Dropzone apiKey="YOUR_API_KEY">
  {/* Your styled dropzone */}
</Dropzone>

Props

Commonly used props include:

• accept - accepted file types
• apiKey - your Zippin API key
• autoFocus - focus the root element on render
• bucket - specify which Zippin bucket to upload files to
• disabled - disable the dropzone
• onDrop - handle drop events
• onError - handle errors during file uploads
• onUpload - handle successful file uploads
• maxSize - maximum file size in bytes
• noClick - disable click to open the native file selection dialog
• noDrag - disable drag 'n' drop
• noKeyboard - disable SPACE/ENTER to open the native file selection dialog

Handle uploads

Update a user's avatar:

<Dropzone
  accept="image/*"
  apiKey="YOUR_API_KEY"
  onUpload={(file) => updateUser({ avatar: file.url })}
>
  {/* Your styled dropzone */}
</Dropzone>

Create new buckets

Start by creating a new bucket in the Zippin Dashboard. When creating a bucket, you can select the storage class, location, and accepted file types. In this example, an avatars bucket was created that accepts image/* files:

<Dropzone
  accept="image/*"
  apiKey="YOUR_API_KEY"
  bucket="avatars"
  onUpload={(file) => updateUser({ avatar: file.url })}
  onError={() => alert('Please upload an image!')}
>
  {/* Your styled dropzone */}
</Dropzone>

License

MIT License