esbuild-plugin-blurhash-as
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.0 • Public • Published

    esbuild-plugin-blurhash-as

    ESBuild plugin for generating Blurhash with blurhash-as

    NPM JavaScript Style Guide

    Install

    npm install --save-dev esbuild-plugin-blurhash-as
    yarn add -D esbuild-plugin-blurhash-as

    Usage

    Config

    NOTE: If you are using an image loader plugin that allows imports for .jpg or .png, make sure that the blurhash plugin is called first.

    NOTE: If you aren't using an image loader plugin, make sure that the loader option for esbuild is set:

    loader: {
      '.jpg': 'file',
      '.png': 'file,
    },
    import blurhash from 'esbuild-plugin-blurhash-as';
    
    esbuild.build({
      plugins: [
        blurhash(),
      ],
      loader: {
        '.jpg': 'file',
        '.png': 'file,
      },
    });

    Code

    // Allows importing both JPG and PNG files
    // Valid blurhash values includes "css", "svg", "jpg" and "png"
    import * as image from './example.jpg?blurhash=css';
    
    console.log(image);
    // {
    //   // The blurhash of the image
    //   hash: '...',
    //   // The generated placeholder
    //   // For "svg", "jpg" and "png",
    //   // This is a string output.
    //   placeholder: {...},
    //   // The url of the image
    //   source: '...',
    //   // Dimensions of the image
    //   width: ...,
    //   height: ...,
    // }

    With react-blurhash-as

    Basic Rendering

    import { Blurhash } from 'react-blurhash-as';
    import * as image from './example.jpg?blurhash=css';
    
    <Blurhash
      mode="css" // "svg", "canvas" or "image
      src={image.source}
      alt=""
      width={image.width}
      height={image.height}
      hash={image.hash}
    />

    Static Rendering

    import { BlurhashStatic } from 'react-blurhash-as';
    import * as image from './example.jpg?blurhash=css';
    
    <BlurhashStatic
      mode="css" // "svg" or "image"
      src={image.source}
      alt=""
      width={image.width}
      height={image.height}
      placeholder={image.placeholder}
    />

    Typescript

    You can refer to esbuild-plugin-blurhash-as/shim:

    /// <reference types="esbuild-plugin-blurhash-as/shim" />

    License

    MIT © lxsmnsyc

    Install

    npm i esbuild-plugin-blurhash-as

    DownloadsWeekly Downloads

    7

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    75.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • lxsmnsyc