47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { FastAverageColor } from 'fast-average-color';
|
|
|
|
export const useFastAverageColor = (args: {
|
|
algorithm?: 'dominant' | 'simple' | 'sqrt';
|
|
id?: string;
|
|
src?: string | null;
|
|
srcLoaded?: boolean;
|
|
}) => {
|
|
const { algorithm, src, srcLoaded, id } = args;
|
|
const idRef = useRef<string | undefined>(id);
|
|
|
|
const [color, setColor] = useState<string | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
const fac = new FastAverageColor();
|
|
|
|
if (src && srcLoaded) {
|
|
fac.getColorAsync(src, {
|
|
algorithm: algorithm || 'dominant',
|
|
ignoredColor: [
|
|
[255, 255, 255, 255, 90], // White
|
|
[0, 0, 0, 255, 30], // Black
|
|
[0, 0, 0, 0, 40], // Transparent
|
|
],
|
|
mode: 'precision',
|
|
})
|
|
.then((color) => {
|
|
idRef.current = id;
|
|
return setColor(color.rgb);
|
|
})
|
|
.catch((e) => {
|
|
console.log('Error fetching average color', e);
|
|
idRef.current = id;
|
|
return setColor('rgba(0, 0, 0, 0)');
|
|
});
|
|
} else if (srcLoaded) {
|
|
return setColor('var(--placeholder-bg)');
|
|
}
|
|
|
|
return () => {
|
|
fac.destroy();
|
|
};
|
|
}, [algorithm, srcLoaded, src, id]);
|
|
|
|
return { color, colorId: idRef.current };
|
|
};
|