Easily Render ThumbHashes with the <thumb-hash> Custom Element

[hirasso]

Hello!

First, I’d like to extend my gratitude to @evanw for creating this outstanding library.

I’ve noticed that quite a few developers encounter challenges with the core concept of libraries like ThumbHash and BlurHash, as discussed in issue #37, among others. Many of us, myself included, initially approached this by sending a pre-decoded image as a data URI to the browser instead of just the hash. This alternative simply is far less complex in certain use cases, such as single-page applications or infinite scrolls, where relying on the DOMContentLoaded event to decode the hash and render a canvas/image is not enough.

To address this, I recently published a small package that offers a self-initializing custom element, <thumb-hash>, specifically for rendering ThumbHashes. You can find it here: https://github.com/hirasso/thumbhash-custom-element

The following HTML:

<thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" />

…will be transformed as shown below at runtime:

<thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" aria-hidden="true">
  ⏷ #shadow-root (open)
     <canvas width="32" height="32" style="width: 100%; height: 100%;"></canvas>
</thumb-hash>

By default, the <thumb-hash> element renders a canvas. Additional rendering strategies include average to display the average color or img to generate an image with a data URI.

I hope this proves helpful to anyone looking for a streamlined solution! 🙂