Pikas UI

@pikas-ui/dropzone

This package contains a dropzone component. that allows you to drag and drop files.

This library is based on react-dropzone.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/dropzone

yarn add @pikas-ui/dropzone

pnpm add @pikas-ui/dropzone

Usage

Dropzone

The dropzone component allows you to drag and drop files. It also allows you to select files using the file dialog.

Drag 'n' drop some files here, or click to select files(You can upload any number of files)

import { Dropzone } from '@pikas-ui/dropzone';

const Example: React.FC = () => {
  return <Dropzone />;
};

Props

Prop	Description	Type	Default
`height`	The height of the dropzone	`number or string`	`200`
`width`	The width of the dropzone	`number or string`	`"100%"`
`description`	The description of the dropzone	`string`	-
`subDescription`	The sub description of the dropzone	`string`	-
`css`	The css of the dropzone	`DropzoneCSS`	-
`showFilesResult`	Show the files result	`boolean`	`true`
`maxFiles`	The max files of the dropzone (0 for unlimited)	`number`	`0`
`accept`	Set the accepted file types	`string`	-
`maxSize`	Set the max size of the file	`number`	`Infinity`
`minSize`	Set the min size of the file	`number`	`0`
`disabled`	Disable the dropzone	`boolean`	`false`
`multiple`	Allow multiple files	`boolean`	`true`
`noClick`	Disable click to open file dialog	`boolean`	`false`
`noKeyboard`	Disable keyboard navigation	`boolean`	`false`
`autoFocus`	Set focus on the dropzone	`boolean`	`false`
`getFilesFromEvent`	Get files from event	`Function`	-
`noDragEventsBubbling`	Stop drag events from bubbling	`boolean`	`false`
`onDrop`	Callback when a file is dropped	`Function`	-
`onDropAccepted`	Callback when a file is accepted	`Function`	-
`onDropRejected`	Callback when a file is rejected	`Function`	-
`onDragEnter`	Callback when the dragenter event occurs	`Function`	-
`onDragLeave`	Callback when the dragleave event occurs	`Function`	-
`onDragOver`	Callback when the dragover event occurs	`Function`	-
`noDrag`	Disable drag and drop	`boolean`	`false`
`onError`	Callback when an error occurs	`Function`	-
`onFileDialogCancel`	Callback when the file dialog is canceled	`Function`	-
`onFileDialogOpen`	Callback when the file dialog is opened	`Function`	-
`preventDropOnDocument`	Prevent drop on document	`boolean`	`false`
`useFsAccessApi`	Use the file system access api	`boolean`	`false`
`validator`	Validator function	`Function`	-

Contributing

This documentation can be edited on GitHub here