tessl/npm-mantine--dropzone

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Mantine Dropzone

Name: tessl/npm-mantine--dropzone
Author: tessl

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;
}