https://github.com/svar-widgets/react-filemanager
React file explorer / file browser component
https://github.com/svar-widgets/react-filemanager
file-browser file-explorer file-manager react react-file-browser react-file-explorer reactjs typescript
Last synced: 2 months ago
JSON representation
React file explorer / file browser component
- Host: GitHub
- URL: https://github.com/svar-widgets/react-filemanager
- Owner: svar-widgets
- License: mit
- Created: 2025-10-13T15:55:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-15T09:08:26.000Z (2 months ago)
- Last Synced: 2026-01-15T15:25:44.739Z (2 months ago)
- Topics: file-browser, file-explorer, file-manager, react, react-file-browser, react-file-explorer, reactjs, typescript
- Language: JavaScript
- Homepage: https://svar.dev/react/filemanager/
- Size: 203 KB
- Stars: 30
- Watchers: 0
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# SVAR React File Manager | File Explorer
:globe_with_meridians: [Website](https://svar.dev/react/filemanager/) • :bulb: [Getting Started](https://docs.svar.dev/react/filemanager/getting_started/) • :eyes: [Demos](https://docs.svar.dev/react/filemanager/samples/)
[](https://www.npmjs.com/package/@svar-ui/react-filemanager)
[](https://github.com/svar-widgets/react-filemanager/blob/main/license.txt)
[](https://www.npmjs.com/package/@svar-ui/react-filemanager)
[SVAR React File Manager](https://svar.dev/react/filemanager/) is a flexible file explorer component for React apps. It offers a familiar interface for browsing, organizing, and previewing files. Thanks to its extensive API for listening, intercepting, and executing data operations, you can integrate it with any backend — from local storage and databases to cloud services.
### :sparkles: Key features:
- Basic file operations: create, delete, copy, rename, cut, paste
- Download and upload files
- Files tree view
- List and tiles views
- File preview pane with file information (file size, type, modified date, etc)
- Split view to manage files between different locations
- Built-in search box
- Context menu and toolbar for quick actions
- Keyboard navigation
- Used storage info
- Light and dark themes, with easy customization
- Localization support
- Optimized for large datasets with dynamic directory loading
- Extensive API to listen, intercept, and execute data operations
- Full TypeScript support
- React 18 & 19 compatible
### :hammer_and_wrench: How to Use
To start using SVAR React File Manager, simply import the package and include the component in your React file:
```jsx
import { FileManager } from "@svar-ui/react-filemanager";
import "@svar-ui/react-filemanager/all.css";
const files = [
{
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",
},
];
const myComponent => ();
```
See the [getting started guide](https://docs.svar.dev/react/filemanager/getting_started/) to set up and start using the File Manager in your React projects.
### :speech_balloon: Need Help?
[Post an Issue](https://github.com/svar-widgets/react-filemanager/issues/) or use our [community forum](https://forum.svar.dev).