@hirasso/thumbhash-custom-element

<thumb-hash>

A custom element that automatically renders a thumbhash placeholder for your lazy-loaded images 🎨

Demo

thumbhash-custom-element.netlify.app

Installation

Install from npm and import it into your bundle:

npm i @hirasso/thumbhash-custom-element

import ThumbHashElement from "thumbhash-custom-element";
ThumbHashElement.init();

Or include the minified production file from a CDN:

<script type="module">
  import ThumbHashElement from "https://unpkg.com/@hirasso/thumbhash-custom-element@0?module";
  ThumbHashElement.init();
</script>

Usage

Markup

If the script is installed an initialized, you can start adding <thumb-hash> to your markup:

<figure>
+  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" />
  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
</figure>

The custom element will automatically create a canvas with the thumbhash image for you:

<figure>
+  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA">
+    ⇩#shadow-root (open)
+       <canvas width="32" height="32" style="width: 100%; height: 100%;"></canvas>
+  </thumb-hash>
  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
</figure>

Styling

figure,
figure img {
  position: relative;
}
thumb-hash {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Average color

If you add the boolean attribute average to your <thumb-hash />, the average color of the image will be rendered instead of the blurry thumbhash image:

<figure>
+  <thumb-hash average value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" />
  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
</figure>

The custom element will automatically create a canvas with the thumbhash image for you:

<figure>
+  <thumb-hash average value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA">
+    ⇩#shadow-root (open)
+       <div style="width: 100%; height: 100%; background: rgb(111, 51, 0);"></div>
+  </thumb-hash>
  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
</figure>