1.0.6 • Published 1 year ago
@zippin/react v1.0.6
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 typesapiKey
- your Zippin API keyautoFocus
- focus the root element on renderbucket
- specify which Zippin bucket to upload files todisabled
- disable the dropzoneonDrop
- handle drop eventsonError
- handle errors during file uploadsonUpload
- handle successful file uploadsmaxSize
- maximum file size in bytesnoClick
- disable click to open the native file selection dialognoDrag
- disable drag 'n' dropnoKeyboard
- 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