1# vamtec-react
2
3`vamtec-react` is a React utility library designed to simplify common frontend tasks, such as file downloading, handling different file formats, and more.
4
5## Installation
6
7To install the library, you can use either `npm` or `yarn`:
8
9### npm:
10```bash
11npm install vamtec-react

yarn:

1yarn add vamtec-react

Usage

Downloading Files

The library provides a simple utility for triggering file downloads from a given data source.

1import { DownloadFile } from 'vamtec-react';
2
3const handleDownload = (data, fileName, fileExtension) => {
4  DownloadFile(fileName, fileExtension, data);
5};

Example: Downloading Leave Requests

Here’s an example using axios to download leave requests in different formats such as Excel, CSV, or PDF.

1import React, { useState } from 'react';
2import axios from 'axios';
3import { DownloadFile } from 'vamtec-react';
4
5const App = () => {
6  const [fileFormat, setFileFormat] = useState("excel"); // Default to 'excel' without the dot
7
8  const handleDownload = async () => {
9    try {
10      const response = await axios.get(`http://localhost:5000/download-leave-requests?format=${fileFormat}`, { responseType: 'blob' });
11      // Map 'excel', 'csv', 'pdf' to their respective extensions
12      const fileExtension = fileFormat === "excel" ? ".xlsx" : fileFormat === "csv" ? ".csv" : ".pdf";
13      // Call the fileHandling function with correct file name and extension
14      DownloadFile('Download', fileExtension, response.data); // Pass base filename, extension, and data
15    } catch (error) {
16      console.error('Error downloading file', error);
17    }
18  };
19
20  return (
21    <div>
22      <h1 className="text-2xl font-bold mb-4">Download Leave Requests</h1>
23      <select value={fileFormat} onChange={(e) => setFileFormat(e.target.value)} className="p-2 border rounded-md w-full mb-4">
24        <option value="excel">Excel (.xlsx)</option>
25        <option value="csv">CSV (.csv)</option>
26        <option value="pdf">PDF (.pdf)</option>
27      </select>
28      <button onClick={handleDownload} className="bg-blue-500 text-white p-2 rounded mt-4">
29        Download Leave Requests
30      </button>
31    </div>
32  );
33};
34
35export default App;

API

DownloadFile(baseFilename, fileExtension, data)

• baseFilename (string): The base name of the file (without the extension).
• fileExtension (string): The file extension (e.g., .xlsx, .csv, .pdf).
• data (Blob): The data to be downloaded.

This function creates a temporary anchor (<a>) element, sets the download attribute with the provided baseFilename and fileExtension, and triggers a download of the file using the data provided.

Example:

If you're downloading leave request data as an Excel file, the function will use the filename 'Download', append the .xlsx extension, and download the file using the Blob data.

1DownloadFile('Download', '.xlsx', response.data);

Contributing

We welcome contributions to improve this library! If you'd like to contribute, please:

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

This library is maintained by Sivasaran S.

### Key Sections in `README.md`:
1. **Installation**: Instructions for installing the library with `npm` or `yarn`.
2. **Usage**: Basic usage showing how to import and use the `DownloadFile` utility function.
3. **Example**: A full example using `axios` to download leave requests as different file formats (Excel, CSV, PDF).
4. **API Documentation**: A brief explanation of how the `DownloadFile` function works.
5. **Contributing**: Instructions on how to contribute to the project.
6. **License**: MIT License information.
7. **Author**: Maintainer's details (you).

This `README.md` provides clear usage instructions for developers integrating the `vamtec-react` library into their React projects. Let me know if you need any more details or adjustments!