blurhash-view

blurhash-view for react and react native

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