This content originally appeared on DEV Community and was authored by Orkhan Jafarov
What for?
Simply couldn't find a react hook that will let me just pass my data (string, arraybuffer) and download it as a file.
Description
A react hook to handle data downloading as a file.
Without any dependencies and with typescript support.
How to use?
Click here react-downloadfile-hook
npm install --save react-downloadfile-hook
yarn add react-downloadfile-hook
Examples
Download properly through a link
This is a recommended method to handle downloading. You need to provide required fileName, format/mime-type, data properties into the hook.
import { useDownloadFile } from "react-downloadfile-hook";
const { linkProps } = useDownloadFile({
fileName,
format: "image/svg+xml",
data: `<svg><circle cx="50" cy="50" r="40"fill="red" /></svg>`,
});
<a {...linkProps}>Download SVG File</a>;
Download on click
The simplest way to handle downloading. It also named as a "force download a file". It uses old-school method, adding a link into the DOM and click it.
import { useDownloadFile } from "react-downloadfile-hook";
const { downloadFile } = useDownloadFile({
fileName,
format: "image/svg+xml",
data: `<svg><circle cx="50" cy="50" r="40"fill="red" /></svg>`,
});
<Button onClick={downloadFile}>Download SVG File</Button>;
Advanced handling
If your data is not a string type (ArrayBuffer, Uint8Array, etc), you may need to replace the built-in handler.
You need provide onCreateBlob callback that returns Blob.
import { useDownloadFile } from "react-downloadfile-hook";
const { downloadFile, linkProps } = useDownloadFile({
fileName,
format: "image/svg+xml",
data: new Uint8Array([1, 2, 3]),
onCreateBlob: (data: uint8Array, format) => {
const arrayBuffer = uint8Array.buffer;
return new Blob([arrayBuffer], { type: format });
},
});
<a {...linkProps}>Download File</a>;
<Button onClick={downloadFile}>Download File</Button>;
Cheers!
This content originally appeared on DEV Community and was authored by Orkhan Jafarov
Orkhan Jafarov | Sciencx (2023-04-30T20:59:55+00:00) Download a file with react hook. Retrieved from https://www.scien.cx/2023/04/30/download-a-file-with-react-hook/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.