react-base64-downloader

    2.1.7 • Public • Published

    react-base64-downloader

    minified size download/year

    Easily trigger the download of base64 encoded .png or .jpg images in React.

    Installation

    npm install --save react-base64-downloader

    Usage

    Trigger downloads using the React Base64Downloader component.

    import Base64Downloader from 'react-base64-downloader';
    
    // ...
    
    const base64 =
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY/jPYAwAAzQBM849AKsAAAAASUVORK5CYII=';
    
    // simple
    <Base64Downloader base64={base64} downloadName="1x1_red_pixel">
        Click to download
    </Base64Downloader>
    
    // advanced
    <Base64Downloader
        base64={base64}
        downloadName="1x1_red_pixel"
        Tag="a"
        extraAttributes={{ href: '#' }}
        className="my-class-name"
        style={{ color: 'orange' }}
        onDownloadSuccess={() => console.log('File download initiated')}
        onDownloadError={() => console.warn('Download failed to start')}
    >
        Click to download
    </Base64Downloader>
    );

    Trigger downloads using the triggerBase64Download method.

    import { triggerBase64Download } from 'react-base64-downloader';
    
    // ...
    
    const base64 =
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY/jPYAwAAzQBM849AKsAAAAASUVORK5CYII=';
    
    <button onClick={() => triggerBase64Download(base64, 'my_download_name')}>
        Click to download
    </button>;

    Examples

    See examples here

    Pull requests

    If you plan on spinning up this repo locally and submitting PR's, please ensure you use Prettier to lint the JS.

    First run npm link react-base64-downloader to create a symlink in the node_modules folder locally.

    Next run the dev script npm run dev. Once running, you can open the example/example.html file locally in the browser to see the output. There's no dev server configured.

    Note: hot-reloading is not configured.

    Building

    First run npm link react-base64-downloader to create a symlink in the node_modules folder locally.

    And then simply run npm run build to bundle the code for a production release.

    Install

    npm i react-base64-downloader

    DownloadsWeekly Downloads

    915

    Version

    2.1.7

    License

    ISC

    Unpacked Size

    179 kB

    Total Files

    12

    Last publish

    Collaborators

    • interlocutor.ltd