Download Trigger for Solid

Trigger file downloads programmatically.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

import { DownloadIcon, FileTextIcon } from "lucide-solid";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";

const DownloadTriggerDemo = () => (
  <div class="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
     
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    
      asChild={(props) => (
        <Button {...props()} size="lg" variant="outline">
          <DownloadIcon />
          Download
        </Button>
      )}
    />
  </div>
);

const content = "Hello, World! This is a sample text file.";

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Download Svg

PreviewCode

Promise

PreviewCode

API Reference

DownloadTrigger

data-slot="download-trigger"

PropType

dataDownloadableData | (() → MaybePromise<DownloadableData>)

The data to download.

Type: DownloadableData | (() → MaybePromise<DownloadableData>)

fileNamestring

The name of the file to download.

The MIME type of the data to download.

Type: ImageFileMimeType | ApplicationFileMimeType | TextFileMimeType | FontFileMimeType | VideoFileMimeType | AudioFileMimeType | FileMimeTypeGroup | AnyString

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element