Simple, high-quality drag'n'drop primitive for Solid JS
npm install solid-dzone!solidjs card
!NPM
!package bundle size
!package version
!npm downloads
Simple, high-quality drag'n'drop primitive for Solid JS
bash
npm i solid-dzone
or
yarn add solid-dzone
or
pnpm add solid-dzone
`
Usage
`tsx
import createDropzone from "solid-dzone"
const MyDropZone = () => {
const {
getRootProps,
getInputProps,
setRefs,
} = createDropzone() // You MUST specify the type of the root element for proper typing
let inputRef!: HTMLInputElement
let rootRef!: HTMLDivElement
setTimeout(() => {
// Refs must be set inside a timeout to ensure the elements have been mounted
setRefs(rootRef, inputRef)
})
return (
)
}
`
$3
The dropzone property getters are just two functions that return objects with properties you need to create the drag'n'drop zone. The root properties can be applied to whatever ellement you want, whereas the input properties must be applied to an .
Note that whatever other props you want to add to the elements, you should always pass them through the functions, rather than applying them directly to avoid conflicts and unexpected behaviours.
`jsx
{...getRootProps({
role: "button",
onDrop: e => console.log("FILE WAS DROPPED")
})}
>
`
$3
| Name | Type | Notes |
|------------|----------|----------------------------------------------------------------------------------------------------------------------|
| disabled | boolean | Disable the dropzone |
| maxSize | number | Maximum file size in bytes |
| minSize | number | Minimum file size in bytes |
| multiple | boolean | Allow multiple files |
| maxFiles | number | Maximum number of files |
| accept | string[] | Array of allowed file types, see link for possible values |
| noClick | boolean | Disable click to open file dialog |
| noKeyboard | boolean | Disable keyboard to open file dialog |
| noDrag | boolean | Disable drag'n'drop |
| validator | function | Custom file validation, overrides default |
$3
| Name | Type | Notes |
|--------------------|----------|------------------------------------------------------------------------------------------------------------------------|
| isFocused | function | Boolean signal that indicates whether the dropzone is focused or not |
| isFileDialogActive | function | Boolean signal that indicates whether the file dialog is open or not |
| isDragging | function | Boolean signal that indicates whether the a file is being dragged over the root or not |
| getRootProps | function | Function that returns an object of props for the root element |
| getInputProps | function | Function that returns an object of props for the input element |
| openFileDialog | function | Function to programmatically open the file dialog |
| setRefs | function | Set the root and input refs. Must be called inside a setTimeout to ensure elements are mounted |
| files | function | Signal that returns an array of files |
| errors | function | Object containing errors. Each key is a file name and the value is an object containing the error message and the file |
| removeFile | function | Function to remove a specific file by name |
| removeError | function | Function to remove a specific error by file name |
| clearFiles | function | Function to clear all files |
$3
| Name | Type |
|----------|----------|
| source | string |
| name | string |
| size | number |
| file | File` |