{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-blurhash"],"cli":null},"imports":["import { Blurhash } from 'react-blurhash';","import { BlurhashCanvas } from 'react-blurhash';","import type { BlurhashProps } from 'react-blurhash';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}