@cubone/react-file-manager

File Manager Component

Overview

The File Manager Component is an open-source React.js package designed to help developers easily integrate a file manager into their applications. This component provides a user-friendly interface along with essential functionalities for managing files and folders, such as viewing, uploading and deleting within a specified directory structure. Ideal for anyone looking to build or enhance a file management system, this package offers both UI and backend integration capabilities.

Features

• View Files and Folders: Display the directory structure with folders and files.
• Upload Files: Upload new files to a selected directory.
• Delete Files and Folders: Remove unwanted files or folders.
• Breadcrumb Navigation: Easily navigate through the directory structure.
• Responsive Design: Works seamlessly on both desktop and mobile devices.

Installation

To get started with the File Manager Component, follow these steps:

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v14 or later)
• npm (v6 or later)

Clone the Repository

git clone https://github.com/Saifullah-dev/react-file-manager.git
cd react-file-manager

Install Dependencies

Using npm:

npm i

Start the Development Server

To start the development server and see the File Manager in action:

npm run dev

The application should now be running on http://localhost:5173.

Usage

File Structure

• src/: Contains all the source code.
  • components/: Reusable components like Button, Context Menu, Modal, etc.
  • File Manager/: The main directory for the File Manager component.
  • hooks/: Custom hooks for handling various interactions and UI state.
  • Mock APIs/: Simulated API functions for demonstration purposes.
  • utils/: Utility functions and helpers.
  • App.js: Main entry point of the application.
  • index.js: Application bootstrap and rendering.

Available Scripts

In the project directory, you can run:

• npm run dev: Runs the app in development mode.
• npm run build: Builds the app for production.
• npm test: Launches the test runner.

Deployment

To deploy the app, first build the project:

npm run build

This will create a build/ directory containing the production-ready code. You can then deploy the contents of this directory to your preferred hosting service.

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/branch-name).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/branch-name).
6. Open a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any questions, feel free to reach out:

• Email: [e-mail]
• GitHub: Saifullah-dev