https://github.com/thelicato/react-file-manager
A simple React component to build a Web File Manager
https://github.com/thelicato/react-file-manager
Last synced: about 2 months ago
JSON representation
A simple React component to build a Web File Manager
- Host: GitHub
- URL: https://github.com/thelicato/react-file-manager
- Owner: thelicato
- License: mit
- Created: 2022-10-04T10:35:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T11:38:51.000Z (over 1 year ago)
- Last Synced: 2024-12-15T17:12:12.189Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.19 MB
- Stars: 12
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React File Manager
`react-file-manager` is a comprehensive UI library for React that enables developers to quickly integrate a file management system into their web applications. This package provides a set of graphical components along with a suite of callback functions to handle various file actions such as refreshing, uploading, creating folders, and deleting files.
## Features
- **Customizable UI**: Easy to integrate with existing projects and modify according to the theme of your application.
- **Event Handling**: Built-in support for essential file management operations including refresh, upload, create folder, and delete.
- **React Optimized**: Utilizes React's latest features for optimal performance and compatibility.
## Installation
Install `react-file-manager` using npm:
```bash
npm install @thelicato/react-file-manager
```
## Usage
Here's a quick example to get you started:
```javascript
import React from "react";
import type { FileSystemType } from "@thelicato/react-file-manager";
import { ReactFileManager } from "@thelicato/react-file-manager";
export const dummyFileSystem: FileSystemType = [
{ id: "0", name: "/", path: "/", isDir: true },
{
id: "31258",
name: "report.pdf",
isDir: false,
parentId: "0",
},
{
id: "31259",
name: "Documents",
isDir: true,
parentId: "0",
path: "/Documents",
},
{
id: "31261",
name: "Personal",
isDir: true,
parentId: "31259",
path: "/Documents/Personal",
},
{
id: "31260",
name: "report.docx",
isDir: false,
parentId: "0",
},
{
id: "31267",
name: "Images",
isDir: true,
parentId: "0",
path: "/Images",
},
{
id: "31260",
name: "logo.png",
isDir: false,
parentId: "31267",
},
];
function App() {
return (
);
}
export default App;
```
This example provide a dummy filesystem, of course you can also map a real file system as long as you create an array of ``FileSystemType``.
## License
[MIT](./LICENSE) License © [Angelo Delicato](https://github.com/thelicato)