Installation and initialization

SVAR FileManager is an open-source library distributed under the MIT license.

Installing File Manager

To install the React File Manager widget, run the following command:

npm install @svar-ui/react-filemanager

# yarn
yarn add @svar-ui/react-filemanager

Initializing

Import the Filemanager component:

import { Filemanager } from "@svar-ui/react-filemanager";

Initialize the Filemanager properties.

The example below creates the File Manager with two folders and three files. The data prop holds the files structure, paths to the items, creation dates and the sizes of items. Pass the data array to the Filemanager component via its data prop.

// App.jsx
import { Filemanager } from "@svar-ui/react-filemanager";

export default function App() {
  const rawdata = [
    {
      id: "/Code",
      size: 4096,
      date: new Date(2023, 11, 2, 17, 25),
      type: "folder",
    },
    {
      id: "/Music",
      size: 4096,
      date: new Date(2023, 11, 1, 14, 45),
      type: "folder",
    },
    {
      id: "/Info.txt",
      size: 1000,
      date: new Date(2023, 10, 30, 6, 13),
      type: "file",
    },
    {
      // parent: "/Code/Datepicker",
      id: "/Code/Datepicker/Year.jsx",
      size: 1595,
      date: new Date(2023, 11, 7, 15, 23),
      type: "file",
    },
    {
      id: "/Pictures/162822515312968813.png",
      size: 510885,
      date: new Date(2023, 11, 1, 14, 45),
      type: "file",
    },
  ];

  return <Filemanager data={rawdata} />;
}

Now you can move forward and load data. See Loading data.