react-blurhash
v0.3.0
Published
Blurhash implementation for React
Downloads
120,896
Readme
react-blurhash
React components for using the blurhash algorithm in your React projects
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
| name | description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| hash
(string) | The encoded blurhash string. |
| width
(int | string) | Width (CSS) of the decoded image. |
| height
(int | string) | Height (CSS) of the decoded image. |
| resolutionX
(int) | The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
| resolutionY
(int) | The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
| punch
(int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
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
| name | description |
| --------------- | --------------------------------------------------------------------------------------- |
| hash
(string) | The encoded blurhash string. |
| width
(int) | Width of the decoded image. |
| height
(int) | Height of the decoded image. |
| punch
(int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
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.