@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 thumbhash-custom-element

import defineThumbhashElement from "thumbhash-custom-element";
defineThumbhashElement();

Or include the minified production file from a CDN:

<script src="https://unpkg.com/thumbhash-custom-element@0"></script>
<script>
  defineThumbhashElement();
</script>

Usage

Markup

If the script is installed an initialized, you can render thumbhash placeholders automatically by using the custom element:

<figure>
  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" aria-hidden="true"></thumb-hash>
  <img src="{{ url }}" loading="lazy" width="{{ width }}" height="{{ height }}" alt="{{ alt }}">
</figure>

Styling

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