Blurhash-loader NPM

blurhash-loader

A blurhash loader module for webpack.

Install

$ npm install -D blurhash-loader

$ 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.