1
0
mirror of https://github.com/funamitech/mastodon synced 2024-12-13 14:18:34 +09:00
YuruToot/app/javascript/flavours/glitch/components/image.tsx
たいち ひ bd851d3b58 [Glitch] Rewrite Image component as function component
Port a65d2d1045 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-05-09 20:24:49 +02:00

28 lines
715 B
TypeScript

import React, { useCallback, useState } from 'react';
import Blurhash from './blurhash';
import classNames from 'classnames';
type Props = {
src: string;
srcSet?: string;
blurhash?: string;
className?: string;
}
export const Image: React.FC<Props> = ({ src, srcSet, blurhash, className }) => {
const [loaded, setLoaded] = useState(false);
const handleLoad = useCallback(() => {
setLoaded(true);
}, [setLoaded]);
return (
<div className={classNames('image', { loaded }, className)} role='presentation'>
{blurhash && <Blurhash hash={blurhash} className='image__preview' />}
<img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
</div>
);
};
export default Image;