evanw / evanw/thumbhash

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

Open
#46 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
Swift
Stars
4.2k
Forks
91
PR merge metrics
No merged PRs in 30d

Description

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, ``, specifically for rendering ThumbHashes. You can find it here: https://github.com/hirasso/thumbhash-custom-element

The following HTML:

```html

```

…will be transformed as shown below at runtime:

```html

⏷ #shadow-root (open)

```

By default, the `` 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! 🙂

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.