@jfvilas/react-file-manager 1.0.13 β 1.1.1
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 +10 -4
- package/dist/react-file-manager.es.js +2985 -2861
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -8,32 +8,36 @@ And our source code project is [here](https://github.com/jfvilas/react-file-mana
|
|
|
8
8
|
</p>
|
|
9
9
|
|
|
10
10
|
## β¨ Features
|
|
11
|
-
|
|
12
11
|
- **File & Folder Management**: View, upload, download, delete, copy, move, create, and rename files
|
|
13
12
|
or folders seamlessly.
|
|
14
13
|
- **Grid & List View**: Switch between grid and list views to browse files in your preferred layout.
|
|
14
|
+
- **Search**: the navigation pane includes a search feature for filtering files on current
|
|
15
|
+
directory.
|
|
16
|
+
- **Status bar**: The navigation pane includes an optional status bar where info about current folder
|
|
17
|
+
and info about current selection items is shown.
|
|
18
|
+
- **View options**: The file manager includes view options like classical desktop file managers.
|
|
15
19
|
- **Navigation**: Use the breadcrumb trail and sidebar navigation pane for quick directory
|
|
16
20
|
traversal.
|
|
17
21
|
- **Toolbar & Context Menu**: Access all common actions (upload, download, delete, copy, move,
|
|
18
22
|
rename, etc.) via the toolbar or right-click for the same options in the context menu.
|
|
23
|
+
- **Context cutomization**: Add your specific *icons* and *actions* for your unique object types. They
|
|
24
|
+
will be shown when needed and added to context menus.
|
|
19
25
|
- **Multi-Selection**: Select multiple files and folders at once to perform bulk actions like
|
|
20
26
|
delete, copy, move, or download.
|
|
21
27
|
- **Keyboard Shortcuts**: Quickly perform file operations like copy, paste, delete, and more using
|
|
22
28
|
intuitive keyboard shortcuts.
|
|
23
29
|
- **Drag-and-Drop**: Move selected files and folders by dragging them to the desired directory,
|
|
24
30
|
making file organization effortless.
|
|
25
|
-
- **Context cutomization**: Add your specifcia use-case icons and actions for your unique object types.
|
|
26
31
|
|
|
27
32
|
## π Installation
|
|
28
|
-
|
|
29
33
|
To install `React File Manager`, use the following command:
|
|
30
34
|
|
|
31
35
|
```bash
|
|
32
36
|
npm i @jfvilas/react-file-manager
|
|
33
37
|
```
|
|
34
38
|
|
|
35
|
-
## π» Usage
|
|
36
39
|
|
|
40
|
+
## π» Usage
|
|
37
41
|
Hereβs a basic example of how to use the File Manager Component in your React application:
|
|
38
42
|
|
|
39
43
|
```jsx
|
|
@@ -61,6 +65,7 @@ function App() {
|
|
|
61
65
|
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
|
|
62
66
|
updatedAt: "2024-09-08T16:45:00Z",
|
|
63
67
|
size: 2048, // File size in bytes (example: 2 KB)
|
|
68
|
+
class: 'image' // optional property for customization
|
|
64
69
|
},
|
|
65
70
|
]);
|
|
66
71
|
|
|
@@ -74,6 +79,7 @@ function App() {
|
|
|
74
79
|
export default App;
|
|
75
80
|
```
|
|
76
81
|
|
|
82
|
+
|
|
77
83
|
## Typescript Usage
|
|
78
84
|
If you plan to user react-file-manager in a Typescript project, you can add type management by adding a `.d.ts` file. What follows is a sample file, but you can donwload a full module declaaration file **[here](https://raw.githubusercontent.com/jfvilas/react-file-manager/refs/heads/main/frontend/public/jfvilas-react-file-manager.d.ts)**. Inside that file you will find a module declaration and a bunch of type and interface declarations. What follows is just a excerpt.
|
|
79
85
|
|