useImageColor

useImageColor.ts

const useImageColor = (throwOnError = false) => {
  const [element, setElement] = useState<HTMLImageElement | null>(null)
  const [color, setColor] = useState<string | null>(null)

  const ref = useCallback(
    (image: HTMLImageElement | null) => {
      if (image) {
        image.crossOrigin = 'Anonymous'
        setElement(image)
      }
    },
    [setElement]
  )

  useEffect(() => {
    return element
      ? void new ImageColor()
          .getColorAsync(element, {
            ignoredColor: [0, 0, 0, 0],
            // algorithm: 'dominant',
          })
          .then(({ hex }) => setColor(hex))
          // die silently otherwise.
          .catch((error) => {
            if (throwOnError) {
              throw error
            }
          })
      : void 0
  }, [element, throwOnError])

  return [ref, color] as const
}