@jfvilas/react-file-manager 1.0.9 → 1.0.11
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 +11 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
# React File Manager
|
|
2
|
+
<p>
|
|
2
3
|
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.
|
|
3
4
|
|
|
4
5
|
This project is forked from [this fantastic project](https://github.com/Saifullah-dev/react-file-manager).
|
|
5
6
|
|
|
6
7
|
And our source code project is [here](https://github.com/jfvilas/react-file-manager).
|
|
8
|
+
</p>
|
|
7
9
|
|
|
8
10
|
## ✨ Features
|
|
9
11
|
|
|
@@ -130,7 +132,8 @@ Moreover, you can add specific actions for each type of object:
|
|
|
130
132
|
- For the top level, a sample action could be to show the list of books that belong to that category.
|
|
131
133
|
- For the third level, the book in itself, you could add some actions like: read, view details, share link...
|
|
132
134
|
|
|
133
|
-
You can build interfaces like this:
|
|
135
|
+
You can build interfaces like this:
|
|
136
|
+
|
|
134
137
|
|
|
135
138
|
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`.
|
|
136
139
|
|
|
@@ -185,9 +188,10 @@ Once you have defined your `icons` and your `actions`, you just need to add them
|
|
|
185
188
|
|
|
186
189
|
...And you'll see the magic 🪄!!
|
|
187
190
|
|
|
188
|
-
What follows is an example with Kubernetes objects, icons and actions that we have implemented in (
|
|
191
|
+
What follows is an example with Kubernetes objects, icons and actions that we have implemented in [Kwirth](https://www.github.com/jfvilas/kwirth) project.
|
|
192
|
+
|
|
193
|
+
|
|
189
194
|
|
|
190
|
-
![https://raw.githubusercontent.com/jfvilas/react-file-manager/refs/heads/main/frontend/public/fileman-2.png]
|
|
191
195
|
|
|
192
196
|
## 🎨 UI Customization
|
|
193
197
|
`react-file-manager` can be easily customized to mmet your React application UI srtyles.
|
|
@@ -218,6 +222,7 @@ The simplest way for customizing this component is as follows:
|
|
|
218
222
|
|
|
219
223
|
Et voilà !
|
|
220
224
|
|
|
225
|
+
|
|
221
226
|
## ⚙️ Props
|
|
222
227
|
|
|
223
228
|
| Name | Type | Description |
|
|
@@ -262,6 +267,7 @@ Et voilà !
|
|
|
262
267
|
| `style` | object | Inline styles applied to the FileManager root element. |
|
|
263
268
|
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
|
|
264
269
|
|
|
270
|
+
|
|
265
271
|
## ⌨️ Keyboard Shortcuts
|
|
266
272
|
|
|
267
273
|
| **Action** | **Shortcut** |
|
|
@@ -284,6 +290,7 @@ Et voilà !
|
|
|
284
290
|
| Refresh File List | `F5` |
|
|
285
291
|
| Clear Selection | `Esc` |
|
|
286
292
|
|
|
293
|
+
|
|
287
294
|
## 🛡️ Permissions
|
|
288
295
|
|
|
289
296
|
Control file management actions using the `permissions` prop (optional). Actions default to `true`
|
|
@@ -310,6 +317,7 @@ The `FileManager` component allows you to provide a custom file preview by passi
|
|
|
310
317
|
`filePreviewComponent` prop. This is an optional callback function that receives the selected file
|
|
311
318
|
as an argument and must return a valid React node, JSX element, or HTML.
|
|
312
319
|
|
|
320
|
+
|
|
313
321
|
### Usage Example
|
|
314
322
|
|
|
315
323
|
```jsx
|