Loading...
Installation
Usage
import { SketchpadDropzone } from "@/components/ruixen/sketchpad-dropzone";
const files = [
{
id: "1",
file: new File([""], "document.pdf", { type: "application/pdf" }),
},
];
export default function App() {
const handleDrop = (fileList: FileList) => {
console.log("Files dropped:", fileList);
};
const handleRemove = (id: string) => {
console.log("Remove file:", id);
};
return (
<SketchpadDropzone
files={files}
onDrop={handleDrop}
onRemove={handleRemove}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
files | DropFile[] | - | Array of files to display |
onDrop | (files: FileList) => void | - | Callback when files are dropped |
onRemove | (id: string) => void | - | Callback when file is removed |
Features
- Grid Background: Sketchpad-style lined background
- Drag & Drop: Full drag and drop support
- Click to Upload: Click anywhere to open file picker
- Sticky Note Cards: Files appear as yellow sticky notes
- Smooth Animations: Scale and rotation effects
- Multiple Files: Support for multiple file uploads
File Type
export type DropFile = {
id: string;
file: File;
};