www.dextsolution.com
DEXTUPLOAD
X5
menu toggleReact リファレンス > DEXTUploadX5UI(List/Tile/Single/Grid)

DEXTUploadX5UI(List/Tile/Single/Grid)

コンポーネント

dextuploadx5-react 0.0.1 以降

DEXTUploadX5UI は React で X5 UI を生成するための基本コンポーネントであり、実際のパッケージではこれを基に DEXTUploadX5ListDEXTUploadX5GridDEXTUploadX5TileDEXTUploadX5Single を提供します。

このコンポーネントは渡された属性を用いて内部的に DX5.create() を呼び出し、React のライフサイクルに合わせて X5 インスタンスを生成・削除します。

import {
  DEXTUploadX5List,
  DEXTUploadX5Grid
} from "dextuploadx5-react";

function Sample() {
  return (
    <>
      <DEXTUploadX5List id="list1" style={{ width: "100%", height: "320px" }} />
      <DEXTUploadX5Grid id="grid1" style={{ width: "100%", height: "320px" }} />
    </>
  );
}

List、Tile、Single、Grid コンポーネントは、内部的に異なる固定 type 値を渡す薄いラッパーです。

次の属性が変わると内部 X5 インスタンスが再生成されます: id, type, progressType, path, waitingTime, lang

Grid の columns 属性は Grid 形式でのみ意味を持ち、onCreated 時点で内部列を再構成します。

属性