@jfvilas/react-file-manager 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# React File Manager
|
|
2
|
-
<p>
|
|
3
2
|
An open-source React package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
|
|
4
3
|
|
|
5
4
|
This project is forked from [this fantastic project](https://github.com/Saifullah-dev/react-file-manager).
|
|
6
|
-
|
|
5
|
+
|
|
6
|
+
And our source code project is [here](https://github.com/jfvilas/react-file-manager).
|
|
7
7
|
|
|
8
8
|
## ✨ Features
|
|
9
9
|
|
|
@@ -20,6 +20,7 @@ This project is forked from [this fantastic project](https://github.com/Saifulla
|
|
|
20
20
|
intuitive keyboard shortcuts.
|
|
21
21
|
- **Drag-and-Drop**: Move selected files and folders by dragging them to the desired directory,
|
|
22
22
|
making file organization effortless.
|
|
23
|
+
- **Context cutomization**: Add your specifcia use-case icons and actions for your unique object types.
|
|
23
24
|
|
|
24
25
|
## 🚀 Installation
|
|
25
26
|
|
|
@@ -129,6 +130,8 @@ Moreover, you can add specific actions for each type of object:
|
|
|
129
130
|
- For the top level, a sample action could be to show the list of books that belong to that category.
|
|
130
131
|
- For the third level, the book in itself, you could add some actions like: read, view details, share link...
|
|
131
132
|
|
|
133
|
+
You can build interfaces like this: ![https://raw.githubusercontent.com/jfvilas/react-file-manager/refs/heads/main/frontend/public/fileman.png]
|
|
134
|
+
|
|
132
135
|
For achieving these objectives you need to add to each entry in the `files` object an **optional** property called `class`. So, for the top level, the class property could be `category`. For the second level, the value of `class` could be something like `topic`, and for the third level it could be something like `book`.
|
|
133
136
|
|
|
134
137
|
The next step is to add the icons for these objects. You must create a Map like this one:
|
|
@@ -182,6 +185,10 @@ Once you have defined your `icons` and your `actions`, you just need to add them
|
|
|
182
185
|
|
|
183
186
|
...And you'll see the magic 🪄!!
|
|
184
187
|
|
|
188
|
+
What follows is an example with Kubernetes objects, icons and actions that we have implemented in (Kwirth)[https://www.github.com/jfvilas/kwirth] project.
|
|
189
|
+
|
|
190
|
+
![https://raw.githubusercontent.com/jfvilas/react-file-manager/refs/heads/main/frontend/public/fileman-2.png]
|
|
191
|
+
|
|
185
192
|
## 🎨 UI Customization
|
|
186
193
|
`react-file-manager` can be easily customized to mmet your React application UI srtyles.
|
|
187
194
|
|