DropZone

使用法

import { useState } from 'react';
import { DropZone } from '@wordpress/components';
const MyDropZone = () => {
   const [ hasDropped, setHasDropped ] = useState( false );
   return (
   <div>
   { hasDropped ? 'Dropped!' : 'Drop something here' }
   <DropZone
   onFilesDrop={ () => setHasDropped( true ) }
   onHTMLDrop={ () => setHasDropped( true ) }
   onDrop={ () => setHasDropped( true ) }
   />
   </div>
   );
}

プロパティ

コンポーネントは以下のプロパティを受け入れます:

className

ラッパー要素に与えるCSS class。

• タイプ: String
• デフォルト: undefined
  

label

ドロップゾーンエリア内に表示される文字列。

• タイプ: String
• デフォルト: Drop files to upload
  

onFilesDrop

ファイルをDropZoneにドロップしたときに呼び出される関数。ドロップされたファイルの配列を引数として受け取ります。

• タイプ: Function
• 必須: いいえ
• デフォルト: noop
  

onHTMLDrop

HTMLをDropZoneにドロップしたときに呼び出される関数。ドロップされたHTMLを引数として受け取ります。

• タイプ: Function
• 必須: いいえ
• デフォルト: noop
  

onDrop

- タイプ: `````Function

• 必須: いいえ
• デフォルト: noop