or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-dropzone.mdfullscreen-dropzone.mdindex.mdmime-types.mdstatus-components.md
tile.json

tessl/npm-mantine--dropzone

Dropzone component built with Mantine theme and components for file drag-and-drop functionality

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/dropzone@8.2.x

To install, run

npx @tessl/cli install tessl/npm-mantine--dropzone@8.2.0

index.mddocs/

Mantine Dropzone

Mantine Dropzone is a React component library providing drag-and-drop file upload functionality built on top of react-dropzone. It integrates seamlessly with Mantine's theming system and component architecture, offering flexible file capture interfaces with built-in accessibility, validation, and visual feedback.

Package Information

  • Package Name: @mantine/dropzone
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mantine/dropzone @mantine/core @mantine/hooks

Core Imports

import { Dropzone } from "@mantine/dropzone";

For specific components:

import { 
  Dropzone, 
  DropzoneFullScreen,
  DropzoneAccept,
  DropzoneIdle,
  DropzoneReject 
} from "@mantine/dropzone";

For MIME type utilities:

import { 
  MIME_TYPES, 
  IMAGE_MIME_TYPE, 
  PDF_MIME_TYPE 
} from "@mantine/dropzone";

For CommonJS:

const { Dropzone, DropzoneFullScreen } = require("@mantine/dropzone");

For CSS styles:

import "@mantine/dropzone/styles.css";

Basic Usage

import { Dropzone, MIME_TYPES } from "@mantine/dropzone";

function Demo() {
  return (
    <Dropzone
      onDrop={(files) => console.log('accepted files', files)}
      onReject={(files) => console.log('rejected files', files)}
      maxSize={3 * 1024 ** 2}
      accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.pdf]}
    >
      <Dropzone.Accept>Drop files here</Dropzone.Accept>
      <Dropzone.Reject>Invalid files</Dropzone.Reject>
      <Dropzone.Idle>Drop files or click to select</Dropzone.Idle>
    </Dropzone>
  );
}

Architecture

Mantine Dropzone is built around several key components:

  • Core Dropzone: Main file drop component with extensive configuration options
  • Status Components: Conditional rendering components (Accept, Reject, Idle) for visual feedback
  • FullScreen Mode: Browser-wide dropzone that activates when files are dragged over the window
  • Context System: React context for sharing dropzone state between components
  • MIME Type Utilities: Pre-defined constants for common file type filtering
  • Mantine Integration: Full theming support and component factory patterns

Capabilities

Core Dropzone Component

Main dropzone component providing file drag-and-drop functionality with extensive configuration options, validation, and Mantine theming integration.

interface DropzoneProps {
  onDrop: (files: FileWithPath[]) => void;
  onReject?: (fileRejections: FileRejection[]) => void;
  onDropAny?: (files: FileWithPath[], fileRejections: FileRejection[]) => void;
  accept?: Accept | string[];
  maxSize?: number;
  maxFiles?: number;
  multiple?: boolean;
  disabled?: boolean;
  loading?: boolean;
  children?: React.ReactNode;
}

const Dropzone: React.FC<DropzoneProps> & {
  Accept: typeof DropzoneAccept;
  Idle: typeof DropzoneIdle;
  Reject: typeof DropzoneReject;
  FullScreen: typeof DropzoneFullScreen;
};

Core Dropzone

Status Components

Conditional rendering components that show different content based on the current dropzone state (idle, accept, reject).

interface DropzoneStatusProps {
  children: React.ReactNode;
}

const DropzoneAccept: React.FC<DropzoneStatusProps>;
const DropzoneIdle: React.FC<DropzoneStatusProps>;
const DropzoneReject: React.FC<DropzoneStatusProps>;

Status Components

FullScreen Dropzone

Browser-wide dropzone overlay that appears when files are dragged over the browser window, providing a full-screen drop target.

interface DropzoneFullScreenProps {
  onDrop?: (files: FileWithPath[]) => void;
  onReject?: (fileRejections: FileRejection[]) => void;
  active?: boolean;
  zIndex?: React.CSSProperties['zIndex'];
  withinPortal?: boolean;
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
  children?: React.ReactNode;
}

const DropzoneFullScreen: React.FC<DropzoneFullScreenProps>;

FullScreen Dropzone

MIME Type Utilities

Pre-defined constants and arrays for common file type filtering and validation.

const MIME_TYPES: {
  png: 'image/png';
  gif: 'image/gif';
  jpeg: 'image/jpeg';
  svg: 'image/svg+xml';
  webp: 'image/webp';
  avif: 'image/avif';
  heic: 'image/heic';
  heif: 'image/heif';
  mp4: 'video/mp4';
  zip: 'application/zip';
  rar: 'application/x-rar';
  '7z': 'application/x-7z-compressed';
  csv: 'text/csv';
  pdf: 'application/pdf';
  doc: 'application/msword';
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  xls: 'application/vnd.ms-excel';
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  ppt: 'application/vnd.ms-powerpoint';
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
  exe: 'application/vnd.microsoft.portable-executable';
};

const IMAGE_MIME_TYPE: string[];
const PDF_MIME_TYPE: string[];
const MS_WORD_MIME_TYPE: string[];
const MS_EXCEL_MIME_TYPE: string[];
const MS_POWERPOINT_MIME_TYPE: string[];
const EXE_MIME_TYPE: string[];

MIME Type Utilities

Types

File Types (Re-exported from react-dropzone)

interface FileWithPath extends File {
  readonly path?: string;
}

interface FileRejection {
  file: FileWithPath;
  errors: FileError[];
}

interface FileError {
  code: string;
  message: string;
}

type Accept = Record<string, string[]>;

type DropEvent = React.DragEvent<HTMLElement> | Event;

Theming Types

type DropzoneVariant = 'filled' | 'light';

type DropzoneStylesNames = 'root' | 'inner';

type DropzoneCssVariables = {
  root:
    | '--dropzone-radius'
    | '--dropzone-accept-color'
    | '--dropzone-accept-bg'
    | '--dropzone-reject-color'
    | '--dropzone-reject-bg';
};

Factory Types

type DropzoneFactory = Factory<{
  props: DropzoneProps;
  ref: HTMLDivElement;
  stylesNames: DropzoneStylesNames;
  vars: DropzoneCssVariables;
  staticComponents: {
    Accept: typeof DropzoneAccept;
    Idle: typeof DropzoneIdle;
    Reject: typeof DropzoneReject;
    FullScreen: typeof DropzoneFullScreen;
  };
}>;

Mantine Types

type MantineColor = string;

type MantineRadius = number | string;

interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {}

interface StylesApiProps<T> {
  classNames?: Partial<Record<string, string>>;
  styles?: Partial<Record<string, React.CSSProperties>>;
  unstyled?: boolean;
}

interface ElementProps<T extends keyof JSX.IntrinsicElements, K extends keyof JSX.IntrinsicElements[T] = never> 
  extends Omit<JSX.IntrinsicElements[T], K> {}

interface Factory<T> {
  (props: T): React.ReactElement;
}

interface LoaderProps {
  size?: string | number;
  color?: string;
  variant?: string;
}

interface BasePortalProps {
  target?: HTMLElement | string;
  children?: React.ReactNode;
}