@toolsify/dropzone

A lightweight and customizable dropzone library built on top of Mantine's dropzone component. It provides pre-configured dropzone components and utilities for seamless integration into React applications.

Features

Mantine Integration: Built on top of @mantine/dropzone for robust and flexible file dropzone management.
Customizable: Easily customize dropzone behavior and appearance to fit your application's needs.
TypeScript Support: Fully typed for a better developer experience.
Lightweight: Minimal dependencies for fast and efficient performance.

Installation

Install the library using pnpm, npm, or yarn:

# Using pnpm
pnpm add @toolsify/dropzone

# Using npm
npm install @toolsify/dropzone

# Using yarn
yarn add @toolsify/dropzone

Peer Dependencies

Make sure the following peer dependencies are installed in your project:

react
react-dom
@toolsify/core

You can install them using:

pnpm add react react-dom @toolsify/core

Usage

1. Basic Dropzone

Use the @toolsify/dropzone library to create a basic dropzone in your React application.

import React from "react";
import { Dropzone } from "@toolsify/dropzone";

const App = () => {
  return (
    <Dropzone
      onDrop={(files) => console.log(files)}
      accept={["image/*"]}
      maxSize={3 * 1024 ** 2} // 3 MB
    >
      <div>Drag and drop files here, or click to select files</div>
    </Dropzone>
  );
};

export default App;

2. Customizing Dropzone

You can customize the dropzone's behavior and appearance by passing props.

import React from "react";
import { Dropzone } from "@toolsify/dropzone";

const App = () => {
  return (
    <Dropzone
      onDrop={(files) => console.log(files)}
      accept={["image/png", "image/jpeg"]}
      maxSize={5 * 1024 ** 2} // 5 MB
      multiple
    >
      <div>Drag and drop PNG or JPEG files here, or click to select files</div>
    </Dropzone>
  );
};

export default App;

3. Using Types

The library re-exports types from @mantine/dropzone for better type safety.

import React from "react";
import { DropzoneProps } from "@toolsify/dropzone";

const CustomDropzone = (props: DropzoneProps) => {
  return <Dropzone {...props} />;
};

export default CustomDropzone;

License

This project is licensed under the MIT License.