@unlazy/solid

Solid component for unlazy, the universal lazy loading library leveraging native browser APIs.

• 🎀 Native: Utilizes the loading="lazy" attribute
• 🌊 BlurHash & ThumbHash support: SSR & client-side decoding
• ⚡ Core Web Vitals-aware: Eager-priority path for above-the-fold images, dev-mode LCP warning
• 🎟 <picture>: Art direction with automatic sizes

Installation

# pnpm
pnpm add @unlazy/solid

# npm
npm i @unlazy/solid

Quick Start

import { UnLazyImage } from '@unlazy/solid'

export default function Hero() {
  return (
    <UnLazyImage
      blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
      srcSet="image-320w.jpg 320w, image-640w.jpg 640w"
      autoSizes
      onImageLoad={img => console.log('Loaded:', img.src)}
    />
  )
}

Documentation

📖 Read the full documentation, including hash-based placeholders, Core Web Vitals, and SSR.

Migrating from v1

See the migration guide for breaking changes in v2.

License

MIT License © 2023-PRESENT Johann Schopplich