# esbuild-plugin-blurhash-as

> ESBuild plugin for blurhash-as

Latest version **0.10.1** (published 2023-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install esbuild-plugin-blurhash-as
pnpm add esbuild-plugin-blurhash-as
yarn add esbuild-plugin-blurhash-as
bun add esbuild-plugin-blurhash-as
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.1 |
| Published | 2023-03-15 |
| First published | 2021-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 33.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Alexis Munsayac |
| Maintainers | lxsmnsyc |
| Keywords | pridepack, esbuild, blurhash, blurhash-as |

## Links

- npm: https://www.npmjs.com/package/esbuild-plugin-blurhash-as
- Repository: https://github.com/lxsmnsyc/blurhash-as
- Homepage: https://github.com/lxsmnsyc/blurhash-as/tree/main/packages/esbuild-plugin-blurhash-as
- Issues: https://github.com/lxsmnsyc/blurhash-as/issues
- npm.io page: https://npm.io/package/esbuild-plugin-blurhash-as

## Dependencies (2)

- [blurhash-as](https://npm.io/package/blurhash-as.md) 0.10.0
- [blurhash-as-helper](https://npm.io/package/blurhash-as-helper.md) 0.10.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.10.1 (latest) — 2023-03-15
- 0.10.0 — 2023-03-03
- 0.9.1 — 2022-01-24
- 0.9.0 — 2021-10-18
- 0.8.0 — 2021-08-30
- 0.7.1 — 2021-08-29
- 0.7.0 — 2021-08-29
- 0.6.0 — 2021-08-25
- 0.5.0 — 2021-08-23
- 0.4.1 — 2021-07-08
- 0.4.0 — 2021-07-08

## README

# esbuild-plugin-blurhash-as

> ESBuild plugin for generating Blurhash with `blurhash-as`

[![NPM](https://img.shields.io/npm/v/esbuild-plugin-blurhash-as.svg)](https://www.npmjs.com/package/esbuild-plugin-blurhash-as) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Install

```bash
npm install --save-dev esbuild-plugin-blurhash-as
```

```bash
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:

```ts
loader: {
  '.jpg': 'file',
  '.png': 'file,
},
```

```ts
import blurhash from 'esbuild-plugin-blurhash-as';

esbuild.build({
  plugins: [
    blurhash(),
  ],
  loader: {
    '.jpg': 'file',
    '.png': 'file,
  },
});
```

### Code

```ts
// 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

```tsx
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

```tsx
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`:

```ts
/// <reference types="esbuild-plugin-blurhash-as/shim" />
```

## Sponsors

![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)

---
_Source: https://npm.io/package/esbuild-plugin-blurhash-as · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._