react-blurhash
Advanced tools
React components for using the blurhash algorithm in your React projects
npm install --save blurhash react-blurhash
<Blurhash />import { Blurhash } from "react-blurhash";
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.
| 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) |
<Blurhash
hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
width={400}
height={300}
resolutionX={32}
resolutionY={32}
punch={1}
/>
<BlurhashCanvas />import { BlurhashCanvas } from "react-blurhash";
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.
| 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) |
<BlurhashCanvas hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj" width={400} height={300} punch={1} />
Blurhash depends on Uint8ClampedArray, which is supported on all mainstream browsers and >=IE11.
0.3.0
tsup for bundlingFAQs
Blurhash implementation for React
The npm package react-blurhash receives a total of 28,780 weekly downloads. As such, react-blurhash popularity was classified as popular.
We found that react-blurhash demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.