Grab A Color Palette From Images With useImageColor

Description:

useImageColor is a React hook to grab a color palette from images. Render a skeleton color while your original image still loading.

Install & Import:

# NPM
$ npm i use-image-color --save

Use It As A Hook.

import useImageColor from 'use-image-color'

export function Card() {
  const { colors } = useImageColor(url, { 
    cors: true, 
    colors: 5,
    format: 'hex', // or 'rgb'
    windowSize: 50
  })
  return ();
}

Use It As A Component.

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

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

Preview: