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