\r\n\r\nA versatile React component to display and manage file previews, supporting various customization options.\r\n\r\n## 📋 Table of Contents\r\n\r\n- [Features](#-features)\r\n- [Installation](#-installation)\r\n- [Basic Usage](#-basic-usage)\r\n- [Live Demo](#-live-demo)\r\n- [Configuration Options](#️-configuration-options)\r\n- [Contributing](#-contributing)\r\n- [License](#-license)\r\n\r\n## ✨ Features\r\n\r\n- 🖼️ **Visual File Representation:** Displays previews for various image file types.\r\n- ✏️ **Integrated Image Editing:** Allows users to edit images using the features of `react-photo-editor` (brightness, contrast, rotate, flip, draw, etc.).\r\n- 📤 **Drag and Drop Support:** Allows users to easily add files by dragging and dropping.\r\n- 🖱️ **Click to Browse:** Enables file selection through a standard file input dialog.\r\n- 🗑️ **Remove Files:** Option to display a remove icon for individual files.\r\n- ⬇️ **Download Files:** Functionality to enable downloading of displayed files.\r\n- 🔢 **Slider Count:** Shows the current slide number and total count for image sliders.\r\n- 📏 **File Size Display:** Option to show the size of each file.\r\n- ⚙️ **Customizable Styling:** Offers props for adjusting width, height, and rounded corners using Tailwind CSS classes.\r\n- 🚫 **Disable Input:** Option to disable file selection.\r\n- 📄 **Accept Specific Types:** Control which file types are accepted.\r\n- 🔢 **Maximum File Limits:** Set constraints on the number and size of files.\r\n- 🔄 **Controlled Component:** Accepts an array of `files` as a prop for controlled behavior.\r\n- 👂 **Event Callbacks:** Provides callbacks for `onChange`, `onRemove`, `onError`, `onClick`, and `onDrop`.\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\n# Using npm\r\nnpm install react-files-preview\r\n\r\n# Using yarn\r\nyarn add react-files-preview\r\n\r\n```\r\n\r\n## 🚀 Basic Usage\r\n\r\n```jsx\r\nimport React, { useState } from \"react\";\r\nimport { ReactFilesPreview } from \"./components/ReactFilesPreview\";\r\n\r\nfunction App() {\r\n const [files, setFiles] = useState([]);\r\n\r\n const handleFileChange = (event: React.ChangeEvent) => {\r\n const newFiles = Array.from(event.target.files || []);\r\n setFiles((prevFiles) => [...prevFiles, ...newFiles]);\r\n console.log(\"Selected files:\", newFiles);\r\n console.log(\"All files:\", [...files, ...newFiles]);\r\n };\r\n\r\n const handleFileRemove = (removedFile: File) => {\r\n setFiles((prevFiles) => prevFiles.filter((file) => file !== removedFile));\r\n console.log(\"Removed file:\", removedFile);\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## 📱 Live Demo\r\n\r\nSee it in action on [Stackblitz](https://stackblitz.com/edit/vitejs-vite-xjck27?file=src%2FApp.tsx)\r\n\r\n## Props\r\n\r\n| Name | Type | Default | Description |\r\n| --------------------- | ------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| **`files`** | File[] | [] | Pass array of file objects for default files |\r\n| **`url`** | string | null | Set image by passing image URL |\r\n| **`downloadFile`** | boolean | true | Enables file download |\r\n| **`removeFile`** | boolean | true | Show file remove icon on file hover |\r\n| **`showFileSize`** | boolean | true | Show file size under files |\r\n| **`showSliderCount`** | boolean | true | Show slides count under file slider |\r\n| **`disabled`** | boolean | false | If true, prevents user to add files by disabling the component |\r\n| **`multiple`** | boolean | true | Accepts one or more files |\r\n| **`accept`** | string | | Comma-separated lists of file types. See [MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) |\r\n| **`maxFileSize`** | number | | Maximum allowed file size in bytes _e.g. 1024 x 1024 x 5 == 5MB_ |\r\n| **`maxFiles`** | number | | Maximum files allowed to be added |\r\n| **`width`** | string | rfp-basis-11/12 | Tailwind CSS **flex-basis** class https://tailwindcss.com/docs/flex-basis |\r\n| **`height`** | string | | Tailwind CSS **height** class https://tailwindcss.com/docs/height |\r\n| **`fileWidth`** | string | rfp-w-44 | Tailwind CSS **width** class https://tailwindcss.com/docs/width |\r\n| **`fileHeight`** | string | rfp-h-32 | Tailwind CSS **height** class https://tailwindcss.com/docs/height |\r\n| **`getFile`** | func | | Returns all current files |\r\n| **`onChange`** | func | | Returns selected file(s) |\r\n| **`onRemove`** | func | | Returns the removed file |\r\n| **`onError`** | func | | Returns error message as string |\r\n| **`onClick`** | func | | Returns file on click |\r\n\r\n## 🤝 Contributing\r\n\r\nContributions to `react-files-preview` are welcome! If you have any issues, feature requests, or improvements, please open an issue or submit a pull request on the [GitHub repository](https://github.com/musama619/react-files-preview).\r\n\r\n### How to Contribute\r\n\r\n1. Fork the repository\r\n2. Create your feature branch: `git checkout -b feature/amazing-feature`\r\n3. Commit your changes: `git commit -m 'Add some amazing feature'`\r\n4. Push to the branch: `git push origin feature/amazing-feature`\r\n5. Open a pull request\r\n\r\n### Reporting Issues\r\n\r\nWhen reporting issues, please provide:\r\n\r\n- A clear description of the problem\r\n- Steps to reproduce\r\n- Expected vs actual behavior\r\n- Screenshots if applicable\r\n- Environment details (browser, OS, etc.)\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/musama619/react-files-preview/blob/main/LICENSE) file for details.\r\n","readmeFilename":"README.md"}
![\"NPM](\"https://img.shields.io/npm/v/react-files-preview.svg\")
\r\n \r\n \r\n ![\"NPM](\"https://img.shields.io/npm/dm/react-files-preview.svg\")
\r\n \r\n \r\n ![\"License\"](\"https://img.shields.io/npm/l/react-files-preview.svg\")
\r\n \r\n \r\n ![\"CodeQL\"](\"https://github.com/musama619/react-files-preview/workflows/CodeQL/badge.svg\"){kind=icon}
\r\n \r\n