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 { usePalette } from "react-image-palette-hook";

function MyComponent() {
  const { data } = usePalette("https://example.com/image.jpg");

  if (data.loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div style={{ backgroundColor: data.vibrant }}>Vibrant</div>
      <div style={{ backgroundColor: data.darkVibrant }}>Dark Vibrant</div>
      <div style={{ backgroundColor: data.darkMuted }}>Dark Muted</div>
    </div>
  );
}

API

usePalette

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

License

MIT