logoRuru UI

Dropzone

Dropzone allows the user to drag and drop files to upload.

Installation

npx ruru-ui-cli@latest add dropzone

Usage

The Dropzone component is used to allow the user to drag and drop files to upload. This component is a wrapper around the react-dropzone library.


Advanced Example

In this example, we learn how to handle files using the Dropzone component.

Import

We are exporting the RD component from the react-dropzone module. Here RD is the alias for the react-dropzone library.

dropzone.tsx
import * as RD from "react-dropzone";
export { RD };

Props

NameTypeDefaultDescription
classNamestring""Optional additional class names for styling the dropzone.
propsDropzoneProps & React.RefAttributes<DropzoneRef>Props passed to the react-dropzone component.

On this page