use-next-blurhash
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

useNextBlurhash

useNextBlurhash is a custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in Nextjs apps, getting so a better user experience.

To get more context I recommend you read this.

Requeriments

You need at least Next.js 11.

Installation

npm install use-next-blurhash

or

yarn add use-next-blurhash

Usage

useNextBlurhash accepts four values but only the hash is required

useNextBlurhash(hash, width, height, puch);
  • hash: the encoded blurhash (you can obtain one here)
  • width: a number to set the width of the blurred image (160 by default)
  • height: a number to set the height of the blurred image (120 by default)
  • punch: a number that adjusts the contrast of the output image (optional)

Is not necessary that the width and the height that we passed are the same that the original image, I personally recommend you to use the default values because at the end the blurred image will cover all the original image space and looks good.

Example

import Image from "next/image";
import useNextBlurhash from "use-next-blurhash";

export default function Something(props) {
   const [blurDataUrl] = useNextBlurhash("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
   
   return (
      <Image
         src="https://nextjs.org/static/images/learn.png"
         placeholder="blur"
         blurDataURL={blurDataUrl}
         alt="Picture of the author"
      />
   );
}

Config to deploy with Vercel

If you deploy with Vercel, you may have an error something like this: version ZLIB_1.2.9' not found` You can fix it following these steps

Also, you can check the original issue and solution to understand what is going on.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Package Sidebar

Install

npm i use-next-blurhash

Weekly Downloads

530

Version

1.0.5

License

MIT

Unpacked Size

51.6 kB

Total Files

14

Last publish

Collaborators

  • ivansevillaa