SVAR React File Manager 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.
- 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
To start using SVAR React File Manager, simply import the package and include the component in your React file:
import{FileManager}from"@svar-ui/react-filemanager";import"@svar-ui/react-filemanager/all.css";constfiles=[{id: "/Music",size: 4096,date: newDate(2023,11,1,14,45),type: "folder",},{id: "/Info.txt",size: 1000,date: newDate(2023,10,30,6,13),type: "file",},];constmyComponent=>(<FileManagerdata={files}/>);See the getting started guide to set up and start using the File Manager in your React projects.
Post an Issue or use our community forum.