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

Status Components

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

Status components provide conditional rendering based on the current dropzone state, allowing for dynamic visual feedback during drag-and-drop interactions.

Capabilities

DropzoneAccept

Shows children only when the dropzone is in the accept state (valid files are being dragged over).

/**
 * Renders children only when dropzone is in accept state
 * @param props - Component props containing children
 * @returns React component that conditionally renders on accept state
 */
interface DropzoneAcceptProps {
  /** Content to show when files are accepted */
  children: React.ReactNode;
}

const DropzoneAccept: React.FC<DropzoneAcceptProps>;

Usage Examples:

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

function AcceptExample() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      <Dropzone.Accept>
        <Text color="green">Drop files here!</Text>
      </Dropzone.Accept>
    </Dropzone>
  );
}

// With complex content
function ComplexAcceptExample() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      <Dropzone.Accept>
        <div style={{ textAlign: 'center' }}>
          <IconUpload size={50} color="green" />
          <Text size="lg" color="green">Drop files to upload</Text>
          <Text size="sm" color="dimmed">Files will be processed immediately</Text>
        </div>
      </Dropzone.Accept>
    </Dropzone>
  );
}

DropzoneIdle

Shows children only when the dropzone is in the idle state (no drag interaction occurring).

/**
 * Renders children only when dropzone is in idle state
 * @param props - Component props containing children
 * @returns React component that conditionally renders on idle state
 */
interface DropzoneIdleProps {
  /** Content to show when dropzone is idle */
  children: React.ReactNode;
}

const DropzoneIdle: React.FC<DropzoneIdleProps>;

Usage Examples:

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

function IdleExample() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      <Dropzone.Idle>
        <Text>Drag files here or click to select</Text>
      </Dropzone.Idle>
    </Dropzone>
  );
}

// With detailed instructions
function DetailedIdleExample() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      <Dropzone.Idle>
        <div style={{ textAlign: 'center' }}>
          <IconCloudUpload size={50} color="gray" />
          <Text size="lg">Upload files</Text>
          <Text size="sm" color="dimmed">
            Drag and drop files here or click to browse
          </Text>
          <Text size="xs" color="dimmed">
            Supports: Images, PDFs, Documents (max 10MB each)
          </Text>
        </div>
      </Dropzone.Idle>
    </Dropzone>
  );
}

DropzoneReject

Shows children only when the dropzone is in the reject state (invalid files are being dragged over).

/**
 * Renders children only when dropzone is in reject state
 * @param props - Component props containing children
 * @returns React component that conditionally renders on reject state
 */
interface DropzoneRejectProps {
  /** Content to show when files are rejected */
  children: React.ReactNode;
}

const DropzoneReject: React.FC<DropzoneRejectProps>;

Usage Examples:

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

function RejectExample() {
  return (
    <Dropzone 
      onDrop={(files) => console.log(files)}
      accept={['image/*']}
    >
      <Dropzone.Reject>
        <Text color="red">Only images are allowed</Text>
      </Dropzone.Reject>
    </Dropzone>
  );
}

// With detailed error information
function DetailedRejectExample() {
  return (
    <Dropzone 
      onDrop={(files) => console.log(files)}
      accept={['image/*']}
      maxSize={5 * 1024 * 1024} // 5MB
    >
      <Dropzone.Reject>
        <div style={{ textAlign: 'center' }}>
          <IconX size={50} color="red" />
          <Text size="lg" color="red">Invalid files</Text>
          <Text size="sm" color="red">
            Only images under 5MB are accepted
          </Text>
        </div>
      </Dropzone.Reject>
    </Dropzone>
  );
}

Combined Status Usage

All status components are typically used together to provide comprehensive visual feedback:

function ComprehensiveDropzone() {
  return (
    <Dropzone 
      onDrop={(files) => console.log('Accepted:', files)}
      onReject={(files) => console.log('Rejected:', files)}
      accept={['image/*', 'application/pdf']}
      maxSize={10 * 1024 * 1024} // 10MB
    >
      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
        <Dropzone.Accept>
          <div style={{ textAlign: 'center' }}>
            <IconUpload size={52} stroke={1.5} />
            <Text size="xl" inline>
              Drop files here
            </Text>
          </div>
        </Dropzone.Accept>

        <Dropzone.Reject>
          <div style={{ textAlign: 'center' }}>
            <IconX size={52} stroke={1.5} />
            <Text size="xl" inline>
              Invalid file type or size
            </Text>
          </div>
        </Dropzone.Reject>

        <Dropzone.Idle>
          <div style={{ textAlign: 'center' }}>
            <IconPhoto size={52} stroke={1.5} />
            <Text size="xl" inline>
              Upload images or PDFs
            </Text>
            <Text size="sm" color="dimmed" inline mt={7}>
              Attach files by dragging them here or clicking to browse
            </Text>
          </div>
        </Dropzone.Idle>
      </Group>
    </Dropzone>
  );
}

Context Integration

Status components use React context to access the current dropzone state:

interface DropzoneContextValue {
  idle: boolean;
  accept: boolean;
  reject: boolean;
}

const useDropzoneContext: () => DropzoneContextValue;

The status components internally use this context to determine whether to render their children based on the current dropzone state.

Implementation Details

Status components are created using a factory function that generates components based on the specific status type. They automatically handle the conditional rendering logic and integrate with Mantine's component system for consistent prop handling and display names.