Hoppa till huvudinnehåll

DropZone

Dra och släpp
Storybook
React Aria

En yta som ett eller flera objekt kan dras och släppas på. Kombinera med FileTrigger för filuppladdning, eller använd den fristående för andra typer av drag & drop.

<DropZone
  onDrop={handleDrop}
  aria-label='Släpp filer här'
>
  <Text slot='label'>Släpp filer här</Text>
</DropZone>
Släpp filer här

Varianter​

Etikett​

Textetiketten inuti ytan beskriver vad som ska släppas eller väljas. Används DropZone som ett fält bland andra i ett formulär, komplettera med en etikett ovanför.

<Label id='upload-label'>Ladda upp filer</Label>
<DropZone
  aria-labelledby='upload-label'
  aria-label='Släpp filer här'
>
  <Text slot='label'>Släpp filer här</Text>
</DropZone>
Släpp filer här

Validering​

DropZone kan markeras som ogiltig med isInvalid, tillsammans med ett felmeddelande.

<DropZone
  isInvalid
  aria-label='Släpp filer här'
>
  <Text slot='label'>Släpp filer här</Text>
</DropZone>
<FieldError isInvalid>Filen är för stor</FieldError>
Släpp filer här
Filen är för stor

Samma tillstånd kan användas för att begränsa vilka filtyper som är tillåtna:

Släpp filer här

Filuppladdning​

Kombinera med FileTrigger för att låta användaren dra och släppa eller klicka för att välja filer. Se FileTriggers dokumentation för ett komplett exempel med filhantering.

<DropZone
  onDrop={handleDrop}
  aria-label='Dra och släpp filer här'
>
  <Text slot='label'>Dra och släpp filer här</Text>
  <FileTrigger onSelect={handleSelect}>
    <Button variant='secondary'>
      <Upload aria-hidden size={20} />
      Välj filer
    </Button>
  </FileTrigger>
</DropZone>
Dra och släpp filer här

Inaktiverad​

<DropZone
  isDisabled
  aria-label='Släpp filer här'
>
  <Text slot='label'>Släpp filer här</Text>
  <FileTrigger>
    <Button
      variant='secondary'
      isDisabled
    >
      <Upload aria-hidden size={20} />
      Välj filer
    </Button>
  </FileTrigger>
</DropZone>
Släpp filer här

API​

DropZone​

NameTypeDefaultDescription
isInvalidfalse

Marks the dropzone as invalid, e.g. after a failed validation. Pair with FieldError to render the error message, either inside or below the dropzone depending on where it's composed.

className'react-aria-DropZone'

The CSS className for the element. A function may be provided to compute the class based on component state.

isDisabled-

Whether the drop target is disabled. If true, the drop target will not accept any drops.

getDropOperation-

A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.

children-

The children of the component. A function may be provided to alter the children based on component state.

style-

The inline style for the element. A function may be provided to compute the style based on component state.

renderDOMRenderFunction<"div", DropZoneRenderProps>-

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.

Requirements:

  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot-

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.