react-blurhash

React components for using the blurhash algorithm in your React projects

Demo

Install

npm install --save blurhash react-blurhash

Usage

<Blurhash />

import { Blurhash } from "react-blurhash";

Description

Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.

Props

Example

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={400}
  height={300}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>

<BlurhashCanvas />

import { BlurhashCanvas } from "react-blurhash";

Description

BlurhashCanvas is the barebones implementation of a blurhash string to a canvas. You may want to use it instead of the Blurhash component e.g. if you want to control the scaling yourself.

Props

Example

<BlurhashCanvas hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj" width={400} height={300} punch={1} />

Browser support

Blurhash depends on Uint8ClampedArray, which is supported on all mainstream browsers and >=IE11.