Replace repetitive blurhash code with component (#14267)
This commit replaces all unnecessarily repeated code for decoding and embedding blurhash canvases with separate component - <Blurhash>. Under the hood Blurhash component will use effect dependent on its props. This gives a few benefits: it will only be re-rendered whenever the hash or width/height/dummy props update, and will not render if canvas won't get to the final DOM, because then effect won't fire, which prevents weird bugs like #14257.master
Sasha Sorokin
5 years ago
committed by
GitHub
parent
5b7a93b02c
commit
61c07c3731
@ -0,0 +1,61 @@ |
||||
// @ts-check
|
||||
|
||||
import { decode } from 'blurhash'; |
||||
import React, { useRef, useEffect } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
/** |
||||
* @typedef BlurhashPropsBase |
||||
* @property {string} hash Hash to render |
||||
* @property {number} width |
||||
* Width of the blurred region in pixels. Defaults to 32 |
||||
* @property {number} [height] |
||||
* Height of the blurred region in pixels. Defaults to width |
||||
* @property {boolean} [dummy] |
||||
* Whether dummy mode is enabled. If enabled, nothing is rendered |
||||
* and canvas left untouched |
||||
*/ |
||||
|
||||
/** @typedef {JSX.IntrinsicElements['canvas'] & BlurhashPropsBase} BlurhashProps */ |
||||
|
||||
/** |
||||
* Component that is used to render blurred of blurhash string |
||||
* |
||||
* @param {BlurhashProps} param1 Props of the component |
||||
* @returns Canvas which will render blurred region element to embed |
||||
*/ |
||||
function Blurhash({ |
||||
hash, |
||||
width = 32, |
||||
height = width, |
||||
dummy = false, |
||||
...canvasProps |
||||
}) { |
||||
const canvasRef = /** @type {import('react').MutableRefObject<HTMLCanvasElement>} */ (useRef()); |
||||
|
||||
useEffect(() => { |
||||
const { current: canvas } = canvasRef; |
||||
canvas.width = canvas.width; // resets canvas
|
||||
|
||||
if (dummy) return; |
||||
|
||||
const pixels = decode(hash, width, height); |
||||
const ctx = canvas.getContext('2d'); |
||||
const imageData = new ImageData(pixels, width, height); |
||||
|
||||
ctx.putImageData(imageData, 0, 0); |
||||
}, [dummy, hash, width, height]); |
||||
|
||||
return ( |
||||
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} /> |
||||
); |
||||
} |
||||
|
||||
Blurhash.propTypes = { |
||||
hash: PropTypes.string.isRequired, |
||||
width: PropTypes.number, |
||||
height: PropTypes.number, |
||||
dummy: PropTypes.bool, |
||||
}; |
||||
|
||||
export default React.memo(Blurhash); |
||||
Loading…
Reference in new issue