{"size": 554, "ext": "js", "max_stars_repo_path": "components/LazyImg.js", "max_stars_repo_name": "yossial/devteams", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/LazyImg.js", "max_issues_repo_name": "yossial/devteams", "max_issues_repo_issues_event_min_datetime": "2021-09-02T16:11:23.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-09T02:00:18.000Z", "max_forks_repo_path": "components/LazyImg.js", "max_forks_repo_name": "yossial/devteams", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 26.380952381, "max_line_length": 73, "alphanum_fraction": 0.59566787}
import React, { useEffect, useRef, useState } from 'react'

export default function LazyImg({ tinyImgSrc, imgSrc, className, alt }) {
  const [bgImgSrc, setBgImgSrc] = useState(null);
  const image = useRef()
  useEffect(() => {
    const imageLoader = new Image();
    imageLoader.src = imgSrc.src;
    imageLoader.onload = () => {
      setBgImgSrc(imgSrc.src);
    };

  }, [])
  return (
    <img src={bgImgSrc || tinyImgSrc.src} alt={alt || 'image'}
      className={`${className} ${bgImgSrc === null ? 'blur' : ''}`}
      ref={image}
    />
  )
}
