Download Trigger

Used to trigger file downloads programmatically.

import { Button, DownloadTrigger } from '@fidely-ui/react'

const data = 'The modern UI libary'

export const DownloadBasic = () => {
  return (
    <DownloadTrigger
      data={data}
      fileName="sample.txt"
      mimeType="text/plain"
      asChild
    >
      <Button variant="outline">Download txt</Button>
    </DownloadTrigger>
  )
}

Usage

import { DownloadTrigger } from '@fidely-ui/react'

<DownloadTrigger />

Examples

File Size

Use the DownloadTrigger with the FormatByte component to display the size of the file in a human-readable format.

import { Button, DownloadTrigger, FormatByte } from '@fidely-ui/react'
import { LuDownload } from 'react-icons/lu'

const data = 'The modern UI libary.'

export const DownloadFileSize = () => {
  return (
    <DownloadTrigger
      data={data}
      fileName="sample.txt"
      mimeType="text/plain"
      asChild
    >
      <Button variant="outline">
        <LuDownload /> Download (
        <FormatByte value={data.length} unitDisplay="narrow" />)
      </Button>
    </DownloadTrigger>
  )
}

Svg

Here's an example of how to download an SVG file.

import { Button, DownloadTrigger } from '@fidely-ui/react'

const data = String.raw`
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>
`

export const DownloadSvg = () => {
  return (
    <DownloadTrigger
      data={data}
      fileName="circle.svg"
      mimeType="image/svg+xml"
      asChild
    >
      <Button variant="outline">Download txt</Button>
    </DownloadTrigger>
  )
}

Props

Prop	Type	Default	Description
`data`	`-`	—	The data to download.
`fileName`	`string`	`-`	The name of the file to download.
`mimeType`	`FileMimeType`	`-`	The MIME type of the data to download.
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior.