@jfvilas/react-file-manager 1.0.2 → 1.0.3

package/README.md

@@ -97,11 +97,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.
 
-## UI Customization
-+++
+ - 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.
+
+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
 

package/package.json

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