use-image-average-color.tsx

get a box shadow and average color from an image url

import { useState, useEffect } from 'react';
import { FastAverageColor } from 'fast-average-color';

export function useImageAverageColor(imageUrl: string) {
	const [averageColor, setAverageColor] = useState<string | null>(null);
	useEffect(() => {
		const fastAverageColor = new FastAverageColor();
		fastAverageColor.getColorAsync(imageUrl).then((color) => {
			setAverageColor(color.rgba);
		});
	}, [imageUrl]);
	return { averageColor, boxShadow: `0 0 20px 5px ${averageColor}` };
}