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

FullScreen Dropzone

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

The FullScreen Dropzone provides a browser-wide drop target that appears as an overlay when files are dragged over the browser window, offering an enhanced drag-and-drop experience.

Capabilities

DropzoneFullScreen Component

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

/**
 * Full-screen dropzone overlay that appears when dragging files over browser window
 * @param props - Configuration options for the full-screen dropzone
 * @returns React component with full-screen drop functionality
 */
interface DropzoneFullScreenProps extends BoxProps, 
  Omit<DropzoneProps, 'styles' | 'classNames' | 'vars' | 'variant' | 'attributes'>,
  StylesApiProps<DropzoneFullScreenFactory>,
  ElementProps<'div', 'onDragLeave' | 'onDragOver' | 'onDrop' | 'onDragEnter'> {
    
  /** Determines whether user can drop files to browser window @default true */
  active?: boolean;
  
  /** Z-index value @default 9999 */
  zIndex?: React.CSSProperties['zIndex'];
  
  /** Determines whether component should be rendered within Portal @default true */
  withinPortal?: boolean;
  
  /** Props to pass down to the portal when withinPortal is true */
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
  
  /** Called when valid files are dropped */
  onDrop?: (files: FileWithPath[]) => void;
  
  /** Called when invalid files are dropped */
  onReject?: (fileRejections: FileRejection[]) => void;
  
  /** Component children, typically status components */
  children?: React.ReactNode;
}

const DropzoneFullScreen: React.FC<DropzoneFullScreenProps>;

Usage Examples:

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

// Basic full-screen dropzone
function BasicFullScreen() {
  return (
    <DropzoneFullScreen
      onDrop={(files) => console.log('Dropped files:', files)}
    >
      <div style={{ 
        position: 'absolute', 
        top: '50%', 
        left: '50%', 
        transform: 'translate(-50%, -50%)',
        textAlign: 'center'
      }}>
        <Text size="xl">Drop files anywhere!</Text>
      </div>
    </DropzoneFullScreen>
  );
}

// Full-screen dropzone with file type restrictions
function RestrictedFullScreen() {
  return (
    <DropzoneFullScreen
      onDrop={(files) => console.log('Images dropped:', files)}
      onReject={(files) => console.log('Invalid files:', files)}
      accept={['image/*']}
      maxSize={5 * 1024 * 1024} // 5MB
    >
      <div style={{ 
        position: 'absolute', 
        top: '50%', 
        left: '50%', 
        transform: 'translate(-50%, -50%)',
        textAlign: 'center'
      }}>
        <Dropzone.Accept>
          <Text size="xl" color="green">Drop images here!</Text>
        </Dropzone.Accept>
        <Dropzone.Reject>
          <Text size="xl" color="red">Only images under 5MB allowed</Text>
        </Dropzone.Reject>
        <Dropzone.Idle>
          <Text size="xl">Drag images over the browser window</Text>
        </Dropzone.Idle>
      </div>
    </DropzoneFullScreen>
  );
}

// Conditional full-screen dropzone
function ConditionalFullScreen() {
  const [enabled, setEnabled] = useState(true);
  
  return (
    <div>
      <button onClick={() => setEnabled(!enabled)}>
        {enabled ? 'Disable' : 'Enable'} Full-Screen Drop
      </button>
      
      <DropzoneFullScreen
        active={enabled}
        onDrop={(files) => console.log('Files:', files)}
        zIndex={1000}
      >
        <div style={{ 
          position: 'absolute', 
          top: '50%', 
          left: '50%', 
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
          background: 'rgba(0, 0, 0, 0.8)',
          color: 'white',
          padding: '20px',
          borderRadius: '8px'
        }}>
          <Text size="xl">Drop files anywhere on the page!</Text>
        </div>
      </DropzoneFullScreen>
    </div>
  );
}

// Full-screen dropzone without portal
function NonPortalFullScreen() {
  return (
    <div style={{ position: 'relative', height: '100vh' }}>
      <DropzoneFullScreen
        onDrop={(files) => console.log(files)}
        withinPortal={false}
      >
        <div>Full-screen drop zone without portal</div>
      </DropzoneFullScreen>
    </div>
  );
}

Default Props

The DropzoneFullScreen component comes with sensible defaults:

const defaultProps = {
  maxSize: Infinity,
  activateOnDrag: true,
  dragEventsBubbling: true,
  activateOnKeyboard: true,
  active: true,
  zIndex: getDefaultZIndex('max'),
  withinPortal: true,
};

Styling Types

type DropzoneFullScreenStylesNames = DropzoneStylesNames | 'fullScreen';

type DropzoneFullScreenFactory = Factory<{
  props: DropzoneFullScreenProps;
  ref: HTMLDivElement;
  stylesNames: DropzoneFullScreenStylesNames;
  variant: DropzoneVariant;
}>;

Behavior

Activation Logic

The FullScreen Dropzone uses document-level event listeners to detect when files are dragged over the browser window:

dragenter: Increments counter and shows overlay when files detected
dragleave: Decrements counter and hides overlay when counter reaches 0
Visibility: Overlay appears/disappears based on drag state

Portal Integration

By default, the component renders within a Portal, ensuring it appears above all other content. This can be disabled by setting withinPortal={false}.

Z-Index Management

The component uses a high z-index value (9999 by default) to ensure it appears above other content. This can be customized via the zIndex prop.

Event Handling

The component automatically handles:

File drop events with validation
Drag enter/leave detection
Counter-based visibility management
Automatic cleanup on unmount

Integration with Core Dropzone

FullScreen Dropzone internally uses the core Dropzone component but with activateOnClick={false} to prevent click-to-open behavior, focusing solely on drag-and-drop functionality.