@jfvilas/react-file-manager 1.0.2 → 1.0.4

package/README.md

@@ -1,15 +1,8 @@
-![React File Manager](https://github.com/user-attachments/assets/cad4d71d-a2fd-4064-9fce-c0c3a7cb4613)
-
-<div align="center">
-
-![NPM Downloads](https://img.shields.io/npm/d18m/%40cubone%2Freact-file-manager?style=for-the-badge)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40cubone%2Freact-file-manager?style=for-the-badge)
-![NPM Version](https://img.shields.io/npm/v/%40cubone%2Freact-file-manager?style=for-the-badge&color=%23c87d32)
-
-</div>
-
+# React File Manager
 <p>
-An open-source React.js 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.
+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.
+
+This project is forked from [this fantastic project](https://github.com/Saifullah-dev/react-file-manager).
 </p>
 
 ## ✨ Features
@@ -28,8 +21,6 @@ An open-source React.js package for easy integration of a file manager into appl
 - **Drag-and-Drop**: Move selected files and folders by dragging them to the desired directory,
   making file organization effortless.
 
-![React File Manager](https://github.com/user-attachments/assets/e68f750b-86bf-450d-b27e-fd3dedebf1bd)
-
 ## 🚀 Installation
 
 To install `React File Manager`, use the following command:
@@ -97,11 +88,101 @@ type File = {
 };
 ```
 
-## Icons & Actions
-+++
+## 🎬 Icons & Actions
+By adding your own icons and specific actions for your items, you can think of react-file-manager as just a hierarchical object manager, that is, this package is no longer just a file manager, you can, for example, create a hierarchy of books and implement particular actions.
+
+ - For example, you can have a top level category that consist of types of books: novel, essay, history...
+ - On a second level you can add the topic: science-fiction, love, thriller...
+ - On a third level you can just store the book title.
+
+You can add specific icons for each object (category, topic, book))
+
+Moreover, you can add specific actions:
+
+  - For the top level, a sample action could be to send the list of books that belong to that category.
+  - For the third level, the book in itself, you can have some actions like: read, view details, share link...
+
+For achieving these purposes 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`.
+
+The next step is to add the icons for these objects. You must create a Map like this:
+
+```javascript
+  let icons = new Map();
+  icons.set('category', { open: <JSX.Element />, closed: <JSX.Element /> })
+  icons.set('topic', { open: <JSX.Element />, closed: <JSX.Element /> })
+  icons.set('book', { open: <JSX.Element />, closed: <JSX.Element /> })
+```
+
+This way, when rendering an object with the `class` `category`, react-file-manager will show the proper icon.
 
-## UI Customization
-+++
+If you want to add specific actions for each `class`, you can, for example, create an `actions` map like this:
+
+```javascript
+  let actions = new Map();
+  actions.set('namespace', [
+    {
+      title: 'Read book',
+      icon: <FaRead />,
+      onClick: (files) => {
+        console.log('onclick view:', files)
+      }
+    },
+    {
+      title: 'Book details',
+      icon: <FaBook />,
+      onClick: (files) => {
+        console.log('onclick delete:', files)
+      }
+    }
+  ])
+```
+
+This previous piece of code adds two actions to objects of `class` `book`:
+
+  - One for reading the book (the `onClick` method should open an ebook reader on screen) 
+  - Another one for viewing book details.
+
+A typical action contains these properties:
+  - `title`: the text to appear in the context menu.
+  - `icon`: the icon to show next to the text
+  - `onClick`: a function to process the action (on only parameter will be send: an array contianing the files that which the action must be executed on).
+
+Once you have defined your `icons` and your `actions`, you just need to add tehm to your FileManager object like this:
+
+```xml
+  <FileManager files={files} icons={icons} actions={actions} />
+```
+
+...And you'll see the magic 🪄!!
+
+## 🎨 UI Customization
+react-file-manager can be easily customized from your React application.
+
+The simplest way for customizing is as follows:
+
+  1. Create a css file in your project directory (`fm-custom.css`, for example).
+  2. Import it in the JSX or TSX file that contains your FileManager object: 
+  ```javascript
+  import './custom-fm.css'
+  ```
+  3. Customize your fileManager by adding classes to the `fm-custom.css` file. For example:
+  ```css
+  .custom-fm .toolbar {
+    background-color: #e0e0e0;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  .custom-fm .files-container {
+    background-color: #f0f0f0;
+  }
+  ```
+  4. Add your class name to your `FileManager` object:
+  ```xml
+  <FileManager ... className='custom-fm'>
+  ```
+
+Et voilà !
 
 ## ⚙️ Props
 
@@ -244,7 +325,3 @@ function App() {
 - After that, folder changes are driven by `onFolderChange`.
 - If you want to keep the path in sync with user navigation, use a controlled state (as shown
   above).
-
-## ©️ License
-
-React File Manager is [MIT Licensed](LICENSE).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jfvilas/react-file-manager",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "module": "dist/react-file-manager.es.js",
   "files": [