https://github.com/icyjoseph/lazy-render-with-img

Lazy render using native image lazy loading
https://github.com/icyjoseph/lazy-render-with-img

lazy lazy-render native-lazy-loading react vite

Last synced: 3 months ago
JSON representation

Lazy render using native image lazy loading

• Host: GitHub
• URL: https://github.com/icyjoseph/lazy-render-with-img
• Owner: icyJoseph
• License: mpl-2.0
• Created: 2021-04-23T14:19:05.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-24T08:11:32.000Z (about 4 years ago)
• Last Synced: 2025-01-21T19:41:44.677Z (5 months ago)
• Topics: lazy, lazy-render, native-lazy-loading, react, vite
• Language: TypeScript
• Homepage: https://lazy-render-with-img.vercel.app/
• Size: 26.4 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lazy Render

Perhaps an anti pattern, but this project shows how to use `loading=lazy` on an `img` element to lazy render a component.

In this particular case, the lazy rendered component, triggers a call to `react-toastify`.

```tsx

import { ToastContainer, toast } from "react-toastify";

import { LazyRender } from "native-lazy-render";

const HelloWorld = () => {

  useEffect(() => {

    toast("Hello World!", { toastId: "Hello" });

  }, []);

  return null;

};

export default function App() {

  const [show, setShow] = useState(true);

  useEffect(() => {

    if (!show) {

      const handler = () => setShow(true);

      window.addEventListener("scroll", handler);

      return () => window.removeEventListener("scroll", handler);

    }

  }, [show]);

  return (

    <>

      

      

        
Lazy Render

        
Scroll down

         setShow(false)}>Reload

      


      


      {show && (

        

          

        

      )}

      End

    >

  );

}

```