Easily Render ThumbHashes with the `<thumb-hash>` Custom Element
- 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.