react-image-palette-hook

A React hook to extract and generate color palettes from images. This package provides an easy way to extract dominant colors from images and create complementary color palettes.

Installation

npm install react-image-palette-hook
# or
yarn add react-image-palette-hook

Usage

import { useState } from 'react'
import { usePalette } from 'react-image-palette-hook'; 

function App() {
  const [imageUrl, setImageUrl] = useState('https://picsum.photos/200')
  const { data } = usePalette(imageUrl)

  const handleImageChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const objectUrl = URL.createObjectURL(file)
      setImageUrl(objectUrl)
    }
  }

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Color Palette Demo</h1>

      <div className="mb-6">
        <input
          type="file"
          accept="image/*"
          onChange={handleImageChange}
          className="mb-4"
        />
      </div>

      <div className="mb-6">
        <img 
          src={imageUrl} 
          alt="Sample" 
          className="w-48 h-48 object-cover rounded-lg shadow-lg"
        />
      </div>

      {data.loading ? (
        <div className="text-gray-600">Loading palette...</div>
      ) : (
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.vibrant || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Vibrant</p>
              <p className="text-sm text-gray-600">{data.vibrant || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.darkVibrant || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Dark Vibrant</p>
              <p className="text-sm text-gray-600">{data.darkVibrant || 'N/A'}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div
              className="w-24 h-24 rounded-lg shadow-md"
              style={{ backgroundColor: data.darkMuted || '#ccc' }}
            />
            <div>
              <p className="font-semibold">Dark Muted</p>
              <p className="text-sm text-gray-600">{data.darkMuted || 'N/A'}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default App

API

usePalette

function usePalette(imageUrl: string | null): {
  data: {
    vibrant: string | null;
    darkVibrant: string | null;
    darkMuted: string | null;
    loading: boolean;
  };
};

License

MIT