More Premium Hugo Themes Premium React Themes

React Native Blurhash

A library to show colorful blurry placeholders while your content loads.

React Native Blurhash

A library to show colorful blurry placeholders while your content loads.

Author Avatar Theme by mrousavy
Github Stars Github Stars: 2076
Last Commit Last Commit: Feb 24, 2025 -
First Commit Created: Dec 18, 2023 -
default image

Overview:

Blurhash is a library that allows developers to display blurred placeholder previews while images are loading. Instead of showing boring grey boxes, Blurhash provides a compact representation of a placeholder for an image. This library can be used in React Native projects and supports encoding images to blurhashes directly within the app.

Features:

  • Compact Placeholder: Blurhash provides a compact representation of a placeholder for an image.
  • Blurred Preview: Instead of displaying boring grey little boxes while the image loads, show a blurred preview until the full image has been loaded.
  • Expo Compatible: Can be used with development builds in Expo projects without requiring a config plugin.
  • Average Color: Retrieve the average color of the given Blurhash using the getAverageColor function.
  • Native Image Encoder: Includes a native Image encoder for encoding images to blurhashes directly within the React Native app.
  • Validation: Validate a blurhash string using the isValidBlurhash function.
  • Performance Optimization: Decoders are optimized for fast performance, allowing easy usage in collections. Adjust decodeWidth and decodeHeight props for further optimization.
  • Asynchronous Decoding: Decode the Blurhash on a separate background thread instead of the main UI-Thread using decodeAsync={true}.
  • Caching: The rendered Blurhash is cached as long as the blurhash, decodeWidth, decodeHeight, and decodePunch properties remain unchanged.
  • Cosine Operations: Cosine operations are cached in memory to avoid expensive re-calculation.

Installation:

To install Blurhash, use npm:

npm install blurhash

Summary:

Blurhash is a library for React Native that allows developers to display blurred preview placeholders while images are loading. It provides a compact representation of a placeholder for an image and includes features such as average color extraction, native image encoding, and performance optimizations. By using Blurhash, developers can enhance the loading experience for their users and create a more visually appealing interface.