47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { decode } from 'blurhash';
|
|
import React, { useRef, useEffect } from 'react';
|
|
|
|
type Props = {
|
|
hash: string;
|
|
width?: number;
|
|
height?: number;
|
|
dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
|
|
children?: never;
|
|
[key: string]: any;
|
|
}
|
|
const Blurhash: React.FC<Props> = ({
|
|
hash,
|
|
width = 32,
|
|
height = width,
|
|
dummy = false,
|
|
...canvasProps
|
|
}) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
const canvas = canvasRef.current!;
|
|
// eslint-disable-next-line no-self-assign
|
|
canvas.width = canvas.width; // resets canvas
|
|
|
|
if (dummy || !hash) return;
|
|
|
|
try {
|
|
const pixels = decode(hash, width, height);
|
|
const ctx = canvas.getContext('2d');
|
|
const imageData = new ImageData(pixels, width, height);
|
|
|
|
ctx?.putImageData(imageData, 0, 0);
|
|
} catch (err) {
|
|
console.error('Blurhash decoding failure', { err, hash });
|
|
}
|
|
}, [dummy, hash, width, height]);
|
|
|
|
return (
|
|
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
|
|
);
|
|
};
|
|
|
|
const MemoizedBlurhash = React.memo(Blurhash);
|
|
|
|
export { MemoizedBlurhash as Blurhash };
|