blurhash-loader

blurhash-loader

A blurhash loader module for webpack.

Install

$ npm install -D blurhash-loader

or

$ yarn add -D blurhash-loader

Usage

webpack.config.js

module.exports = {
  module: {
    rules: [
      test: /\.(?:gif|jpe?g|png|webp)$/i,
      use: [
        {
          loader: 'blurhash-loader',
          options: {
            componentX: 4,
            componentY: 3
          }
        }
      ]
    ]
  }
}

index.tsx

import { Blurhash } from 'react-blurhash'
import photo, { blurhash } from './photo.jpg'

export default function Home() {
  return (
    <div>
      <Blurhash hash={blurhash} height={600} width={800} />
    </div>
  )
}

Options

Name	Type	Default	Description
componentX	{Number}	4	A componentX is the value passed directly to blurhash.
componentY	{Number}	3	A componentY is the value passed directly to blurhash.
context	{String}	loaderContext.rootContext	A custom file context.
emitFile	{Boolean}	true	Don't emit the file if false is specified.
esModule	{Boolean}	true	If enabled, use the ES modules syntax.
name	{String|Function}	'[contenthash].[ext]'	The filename template for the target file.
outputPath	{String|Function}	undefined	A custom output path for the target file.
publicPath	{String|Function}	undefined	A custom public path for the target file.

License

MIT

Changelog

0.6.0 (2021-09-22)

Features

• disable external font (#165) (8ffba34)

Bug Fixes

• deps: only patch release can be upgraded for prettier (#267) (d9e0d57)
• website: disable eslint (2199579)

Reverts

• github-actions: use github actions tokens (6169d6c)