React - Display BlurHash Image Examples

Are you finding how to display decoded BlurHash image using React? Find out on this tutorial.

First of all, you need to have the encoded BlurHash of the image. If you also need to find how to generate the BlurHash using Java, you can read our other tutorial about it.

Dependencies

The dependency you need to add in your package.json is react-blurhash. This tutorial uses version 1.1.3.

  "react-blurhash": "~0.1.2"

When you're trying to install the dependency, you may get the following error:

  UNMET PEER DEPENDENCY blurhash@^1.1.1

What you need to do is adding "blurhash": "~1.1.1" to the dependcy list and try to reinstall the project dependencies.

Examples

There are two components you can use from react-blurhash: Blurhash and BlurhashCanvas. Below is the list of available props that can be used to customize how the image will be rendered.

*: Not supported on BlurhashCanvas

The higher the resolultion, the bigger the image size and it affects performance. The maximum recommended resolution is 128.

Below are the usage examples of those two mentioned components.

Blurhash Component

  <Blurhash
    hash="U44^RCJ61d=GSOn~sCWo1a$k|^AZ#+S6OAw."
    width={500}
    height={500}
    resolutionX={32}
    resolutionY={32}
    punch={1}
  />

If you're using the component above, the resulted HTML will look like this:

  <div style="display: inline-block; height: 500px; width: 500px; position: relative;">
      <canvas punch="1" height="64" width="64" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%;"></canvas>
  </div>

The image will be wrapped inside a div that controls the size. Inside, there is a canvas where the image will be rendered

BlurhashCanvas Component

  <BlurhashCanvas
    hash="U44^RCJ61d=GSOn~sCWo1a$k|^AZ#+S6OAw."
    width={500}
    height={500}
    punch={1}
  />

Here's the result

  <canvas punch="1" height="500" width="500"></canvas>

Unlike the previous component, it will only generate a canvas element where the size is defined there.

Error Handling

If you need to render dynamic BlurHash, you can't always guarantee that the value is not null and always valid. Unfortunately, the component will throw error. The easiest way to handle error is by wrapping it inside a React component with componentDidCatch.

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    componentDidCatch(error, info) {
      this.setState({ hasError: true });
    }
  
    render() {
      if (this.state.hasError) {
        return <span>Something went wrong.</span>;
      }
  
      return this.props.children;
    }
  }

Then use it to wrap the Blurhash component

  <ErrorBoundary>
    <Blurhash
      hash="U44^RCJ61d=GSOn~sCWo1a$k|^AZ#+S6OAw."
      width={500}
      height={500}
      resolutionX={64}
      resolutionY={64}
      punch={1}
    />
  </ErrorBoundary>