vite-plugin-thumbhash
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

vite-plugin-thumbhash

Add ThumbHash to your vite project.

Install

npm install vite-plugin-thumbhash --save-dev
pnpm add vite-plugin-thumbhash -D

Usage

import { defineConfig } from 'vite'
import { thumbHash } from 'vite-plugin-thumbhash'

export default defineConfig({
  plugins: [thumbHash()]
})
import Image from 'example.jpg?thumb'

//...
<img src={Image.thumbSrc}
     width={Image.thumbWidth}
     height={Image.thumbHeight}
/>


// If you want to import original image
<img src={Image.originalSrc}
     width={Image.originalWidth}
     height={Image.originalHeight}
/>

TypeScript IntelliSense

Add the following code to vite-env.d.ts :

/// <reference types="vite-plugin-thumbhash/client" />

Options

type Options =
    {
      /**
       * A picomatch pattern, or array of patterns, 
       * which specifies the files in the build the plugin should operate on. 
       */
      include?: Array<string | RegExp> | string | RegExp
      /**
       * A picomatch pattern, or array of patterns,
       * which specifies the files in the build the plugin should ignore.
       */
      exclude?: Array<string | RegExp> | string | RegExp
      /**
       * type OutputExtension = 'png' | 'jpg' | 'webp' | 'avif'
       * @default: 'png'
       */
      outputExtension?: OutputExtension
    }

Example

see playground

License

MIT © nemurubaka

Package Sidebar

Install

npm i vite-plugin-thumbhash

Weekly Downloads

4

Version

0.1.6

License

MIT

Unpacked Size

15.2 kB

Total Files

6

Last publish

Collaborators

  • nemurubaka