@annatarhe/blurhash-react

use BlurHash to render placeholder of image

npm install @annatarhe/blurhash-react
yarn add @annatarhe/blurhash-react
pnpm add @annatarhe/blurhash-react

import BlurhashView from "@annatarhe/blurhash-react";

function MyPage() {
  return (
    <BlurhashView
      blurhashValue="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
      src="https://picsum.photos/320/384"
      height={384}
      width={320}
      className="shadow rounded mr-4 -mt-24 w-80 h-96 transition-all duration-300 max-w-xs"
      alt="an awesome image"
    />
  );
}

props

| props | type | example | description | | ------------- | ------ | ----------------------------- | ---------------------------------------- | | blurhashValue | string | LEHV6nWB2yk8pyo0adR*.7kCMdnj | hash value that generated by blurhash | | src | string | https://picsum.photos/320/384 | a image url | | height | number | 100 | optional. image height | | width | number | 100 | optional. image width | | className | string | your-own-classNames | the classNames will applied to the image | | alt | string | title | alt title |