https://github.com/ykzts/blurhash-loader

A blurhash loader module for webpack.
https://github.com/ykzts/blurhash-loader

blurhash loader webpack

Last synced: 25 days ago
JSON representation

A blurhash loader module for webpack.

• Host: GitHub
• URL: https://github.com/ykzts/blurhash-loader
• Owner: ykzts
• License: mit
• Created: 2020-10-19T16:12:16.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-06T13:13:05.000Z (over 1 year ago)
• Last Synced: 2024-12-27T02:11:32.106Z (about 1 month ago)
• Topics: blurhash, loader, webpack
• Language: TypeScript
• Homepage: https://blurhash-loader.vercel.app/
• Size: 5.04 MB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# blurhash-loader

A blurhash loader module for webpack.

## Install

```console

$ npm install -D blurhash-loader

```

or

```console

$ yarn add -D blurhash-loader

```

## Usage

### webpack.config.js

```javascript

module.exports = {

  module: {

    rules: [

      test: /\.(?:gif|jpe?g|png|webp)$/i,

      use: [

        {

          loader: 'blurhash-loader',

          options: {

            componentX: 4,

            componentY: 3

          }

        }

      ]

    ]

  }

}

```

### index.tsx

```typescript

import { Blurhash } from 'react-blurhash'

import photo, { blurhash } from './photo.jpg'

export default function Home() {

  return (

    


      

    

  )

}

```


## 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](LICENSE)