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! 🙂

[andupotorac]

This is useful, thanks!

[hirasso]

This was embarrassing: before version 0.3.0, the custom element didn't even work (It was trying to alter the read-only property shadowRoot). I really don't understand why it even worked on the demo page. Anyways, as of v0.3.0 it should work 😅