Skip to content

🎨 A hook to grab a color palette from images. Render a skeleton color while your original image still loading.

License

Notifications You must be signed in to change notification settings

jeffersonlicet/use-image-color

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

useImageColor

Grab color palette from any image using this hook

Example

How does it work?

It renders your image on a canvas and then generates its palette of colors using color quantization.

Includes Image Component

This image component renders a placeholder color while your original images are loading.

Before loading big images (color from smaller images) Before loading

After loading big images: After loading

Live Sandbox demo:

Live Sandbox Demo

How does this image component work?

You must provide src (your original image) and a thumbnail (smaller image). As soon as the thumbnail is loaded the skeleton becomes visible using its dominant color. In the meantime, your original image continues loading, finally, when your original image arrives, it replaces the skeleton.

Installation:

npm install use-image-color

The hook:

Usage:

import useImageColor from 'use-image-color'

export function Card() {
  const { colors } = useImageColor(url, { cors: true, colors: 5 })
  return (...);
}

Hook params:

useImageColor(url: String, options: OptionsObject)
param description default
cors Use CORS. Enable this if you are using external images false
colors Number of colors to grab 5
format Output format: rgb or hex hex
windowSize Size of window to grab pixels, low values are faster 50

The component:

Usage:

import { Image } from 'use-image-color'

export function Card() {
  return (
    <Image src={url} thumbnail={thumbnail} />
  );
}

Component params:

param description required
thumbnail Small version of your image true
src Original version of your image true
wrapperStyle Style object to apply to the wrapper of the image and the color false
wrapperClass Class to apply to the wrapper of the image and the color false

About

🎨 A hook to grab a color palette from images. Render a skeleton color while your original image still loading.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published