Skip to content

A custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in nextjs getting so a better user experience.

License

Notifications You must be signed in to change notification settings

ivansevillaa/use-next-blurhash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in nextjs getting so a better user experience.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published