Zero Gravity Filedrop

Animated file dropzone for React with floating particles and implosion effect.

Install

npm install @strawberry-code/zero-gravity-filedrop
# peer deps
npm install react react-dom framer-motion lucide-react

Usage

import { AnimatedDropzone } from '@strawberry-code/zero-gravity-filedrop'
import '@strawberry-code/zero-gravity-filedrop/dist/index.css'

function App() {
  return (
    <AnimatedDropzone
      onFilesAdded={(files) => console.log(files)}
      accept="image/*"
      idleText="Drop files here"
      activeText="Release!"
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onFilesAdded | (files: File[]) => void | required | Callback with selected files | | accept | string | 'image/*' | Accepted file types | | multiple | boolean | true | Allow multiple files | | disabled | boolean | false | Disable dropzone | | idleText | string | 'Drop files here...' | Idle state text | | activeText | string | 'Drop to upload!' | Dragging state text | | subtitle | string | - | Subtitle text | | maxFiles | number | - | Max files limit | | maxSize | number | - | Max file size (bytes) | | onError | (error: DropzoneError) => void | - | Validation error handler | | accentColor | string | '#8B5CF6' | Active state color | | borderColor | string | '#9ca3af' | Border color | | textColor | string | '#6b7280' | Text color | | particleColors | string[] | - | Custom particle colors | | zeroGravityEffect | boolean | true | Enable particles | | className | string | - | CSS classes | | style | CSSProperties | - | Inline styles | | children | ReactNode | - | Custom content |

Custom Content

<AnimatedDropzone onFilesAdded={handleFiles}>
  <div>Your custom dropzone content</div>
</AnimatedDropzone>

License

MIT