🦄 Turn blurhash to dataURL on the go.

• Node.js 16X LTS or Higher 📦

• Install the NPM Package with the below command:

#npm npm install blurhash-base64 #yarn yarn add blurhash-base64 #pnpm pnpm add blurhash-base64

• 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> ); }

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

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