client/src/components/BlurryLoadImg.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React from 'react';
import { ClassAttributes, ImgHTMLAttributes } from 'react';
import { JSX } from 'react/jsx-runtime';
import { useBlurryLoad } from '../useBlurryLoad.ts';

export const BlurryLoadImg = (
  props: JSX.IntrinsicAttributes &
    ClassAttributes<HTMLImageElement> &
    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
) => {
  useBlurryLoad();
  return (
    <img alt="" {...props} className={`blurry-load ${props.className}`}></img>
  );
};