Package Exports

blurhash-base64
blurhash-base64/dist/index.esm.js
blurhash-base64/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blurhash-base64) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Blurhash to Base64

🦄 Turn blurhash to dataURL on the go.

Downloads this Week Bundle Size Version

Blurhash to DataURL

📦 Requirements

Node.js 16X LTS or Higher 📦

✨ Installation

Install the NPM Package with the below command:

#npm
npm install blurhash-base64

#yarn
yarn add blurhash-base64

#pnpm
pnpm add blurhash-base64

💡 Usage Example for next/image component

Import blurhashToBase64 in your project
Set the placeholder prop to blur
And pass the blurhash to blurDataURL prop surrounded by blurhashToBase64 (See below example)

import Image from "next/image";
import { blurhashToBase64 } from "blurhash-base64"; // Import blurhashToBase64

export default function Home() {
  return (
    <div>
      <Image
        src="https://picsum.photos/200/300"
        width={200}
        height={300}
        placeholder="blur"
        blurDataURL={blurhashToBase64("UNFFyr-4VXtm%~Z~VXpJpdngnMtl_Ns7VrXA")}
      />
    </div>
  );
}

☑️ Demo

Blurhash to DataURL

🔯 Credits

Blurhash is Generated with blurhash-from-url - A library to generate the blurhash from the given URL.
Blurhash CLI - Generate Blurhash in CLI

💚 Message

I hope you find this useful. If you have any questions, please create an issue.