esbuild-plugin-blurhash-as

ESBuild plugin for generating Blurhash with blurhash-as

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" />

Sponsors

License

MIT © lxsmnsyc