{"id":15172,"library":"react-blurhash","title":"React Blurhash Component","description":"react-blurhash provides React components for efficiently displaying Blurhash placeholders in web applications. Blurhash is a compact algorithm for representing a blurred version of an image, enabling a smooth user experience by showing a low-resolution placeholder while the full image loads. Currently at version 0.3.0, the package offers two core components: `<Blurhash />` for a higher-level, self-scaling implementation, and `<BlurhashCanvas />` for direct canvas rendering, offering granular control over the decoding and display process. The library ships with TypeScript types, enhancing developer experience and type safety. It's built upon the core `blurhash` algorithm and requires `react` (>=15) and `blurhash` (^2.0.3) as peer dependencies, which must be installed separately. The package is actively maintained, though its pre-1.0 version number suggests the API might evolve in future major releases.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/woltapp/react-blurhash","tags":["javascript","blurhash","blur","hash","image","react","component","typescript"],"install":[{"cmd":"npm install react-blurhash","lang":"bash","label":"npm"},{"cmd":"yarn add react-blurhash","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-blurhash","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all React components.","package":"react","optional":false},{"reason":"Core Blurhash encoding/decoding logic; a peer dependency required by `react-blurhash`.","package":"blurhash","optional":false}],"imports":[{"note":"This package is primarily designed for ES module environments. While CommonJS `require` might function through bundler transpilation, the idiomatic usage is ESM `import`. Ships with TypeScript types for direct use.","wrong":"const { Blurhash } = require('react-blurhash');","symbol":"Blurhash","correct":"import { Blurhash } from 'react-blurhash';"},{"note":"Use this component for direct canvas rendering when you need more control over scaling or if you're integrating into a custom image loading solution. Also includes TypeScript definitions.","wrong":"const { BlurhashCanvas } = require('react-blurhash');","symbol":"BlurhashCanvas","correct":"import { BlurhashCanvas } from 'react-blurhash';"},{"note":"For TypeScript users, import prop types for explicit type checking and IDE auto-completion.","symbol":"BlurhashProps","correct":"import type { BlurhashProps } from 'react-blurhash';"}],"quickstart":{"code":"import React from 'react';\nimport { Blurhash } from 'react-blurhash';\n\n// Ensure you have installed peer dependencies: npm install blurhash react\n// This component displays a Blurhash placeholder.\n// In a real application, 'hash' would typically come from an image metadata API.\n\nfunction ImagePlaceholder() {\n  const exampleHash = \"LEHV6nWB2yk8pyo0adR*.7kCMdnj\"; // Example Blurhash string\n\n  return (\n    <div style={{ width: 400, height: 300, border: '1px solid #eee', overflow: 'hidden' }}>\n      <h3>Blurhash Placeholder</h3>\n      <Blurhash\n        hash={exampleHash}\n        width={400}\n        height={300}\n        resolutionX={32}\n        resolutionY={32}\n        punch={1}\n      />\n      <p>Content will load over this placeholder...</p>\n    </div>\n  );\n}\n\nexport default ImagePlaceholder;\n","lang":"typescript","description":"This quickstart demonstrates how to render a Blurhash placeholder using the `<Blurhash />` component. It illustrates basic usage with an example hash string and common props like width, height, and resolution. Remember to install `blurhash` and `react`."},"warnings":[{"fix":"Always check the release notes and changelog when upgrading, even for minor versions, and thoroughly test your application.","message":"The package is currently at version 0.3.0. As a pre-1.0 release, its API is not guaranteed to be stable and may introduce breaking changes in minor versions, though this is less common.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Ensure both `react-blurhash` and `blurhash` are installed: `npm install --save blurhash react-blurhash` or `yarn add blurhash react-blurhash`.","message":"The `blurhash` package is a required peer dependency and must be installed separately alongside `react-blurhash`. Forgetting to install it will lead to runtime errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Optimize `resolutionX` and `resolutionY` to the lowest acceptable values (e.g., 32-64px) for your design to balance visual quality and performance. The default is 32.","message":"Using high values for `resolutionX` and `resolutionY` props (e.g., >128px) can significantly decrease rendering performance, especially when many Blurhash components are on the page.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If dynamic sizing is required, use React refs and the `ResizeObserver` API (or a library like `react-resize-detector`) to measure the parent container's dimensions and pass numerical `width` and `height` values to the Blurhash components.","message":"The `width` and `height` props for `<Blurhash />` and `<BlurhashCanvas />` components must be numbers (integers or pixel values), not CSS string values like '100%'.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Install the `blurhash` package: `npm install blurhash` or `yarn add blurhash`.","cause":"The core `blurhash` package, a required peer dependency, has not been installed.","error":"Error: Cannot find module 'blurhash'"},{"fix":"Ensure your target browser supports `Uint8ClampedArray` (most modern browsers do, >=IE11). For server-side rendering (SSR) in Node.js, you might need to use a canvas polyfill to provide this global object.","cause":"The runtime environment (e.g., an older browser or a Node.js environment without a canvas polyfill for SSR) does not natively support `Uint8ClampedArray`, which the underlying `blurhash` library depends on.","error":"ReferenceError: Uint8ClampedArray is not defined"},{"fix":"Ensure the `hash` prop is a valid, non-empty Blurhash string. Validate the source of your Blurhash strings (e.g., from an API or encoding process).","cause":"The `hash` prop provided to the `Blurhash` or `BlurhashCanvas` component is either missing, empty, or malformed, leading to an invalid Blurhash string.","error":"Warning: Failed prop type: Invalid prop `hash` of type `string` supplied to `Blurhash`, expected `string`."}],"ecosystem":"npm"}