❤
npm
Sign UpSign In

react-downloadbutton

1.0.0 • Public • Published

<!--

title: Download Button xreact: true colors: pink fontPair: Fugaz One ga: UA-7002862-5 source: https://github.com/notablemind/react-downloadbutton/raw/master/Readme.md css: | .DownloadButton { font-size: 16px; font-family: sans-serif; } styles:

-->

View this page rendered at notablemind.github.io/react-downloadbutton

DownloadButton is a simple component for letting the user download a javascript-generated file. It was extracted from Notablemind.

The styling is due to materializecss, and does not come with the DownloadButton component. In some examples, FontAwesome icons are also used. You are free to style the component however you wish.

// @demobox
function makeFile() {
  // do some calculations
  return {
    mime: 'text/plain',
    filename: 'myexportedfile.txt',
    contents: 'all of the exports',
  }
}
 
 
<DownloadButton
  // these classes come from materializecss
  className='waves-effect waves-light btn' 
  genFile={makeFile}/>

You can also use an asynchronous function to generate the file.

// @demobox
function genFile(done) {
  setTimeout(function () {
    done({
      mime: 'text/html',
      filename: 'generated.html',
      contents: `<!doctype html><html>
  <h1>Hello wordl!</h1>
</html>`,
    })
  }, 3000);
}
var loading = <span>
  Crunching hard numbers
  <i className="fa fa-circle-o-notch fa-spin right"/>
</span>;
var download = fileData => 'Download ' + fileData.filename;
 
 
<div style={{textAlign: 'center'}}>
 
  <p>Default titles</p>
 
  <DownloadButton
    className='waves-effect waves-light btn' 
    async={true} genFile={genFile}/>
 
  <p>Custom titles</p>
 
  <DownloadButton
    className='waves-effect waves-light btn' 
    generateTitle={'Click me please'}
    loadingTitle={loading}
    downloadTitle={download}
    async={true}
    genFile={genFile}/>
 
</div>

If you already have the file computed, just pass it in as props.

// @demobox
var fileData = {
  filename: 'hello.txt',
  contents: 'Hello download!',
  mime: 'text/plain',
};
var title = <span>
  Download File
  <i className="mdi-file-file-download right"/>
</span>;
 
 
<DownloadButton
  className='waves-effect waves-light btn' 
  downloadTitle={title}
  fileData={fileData}/>

Readme

Keywords

Package Sidebar

Install

npm i react-downloadbutton

Repository

github.com/notablemind/react-downloadbutton

Homepage

notablemind.github.io/react-downloadbutton

Weekly Downloads

8

Version

1.0.0

License

MIT

Last publish

Collaborators

  • jabapyth
Try on RunKit
Report malware