Build a React.js Project to Implement Lazy Loading of Images From Remote API and Display it in Brows

App.jsx

import React, { useEffect, useState } from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import "react-lazy-load-image-component/src/effects/blur.css"

function App() {

  const [posts,setPosts] = useState([])
  const [loading,setLoading] = useState(true)

  const fetchPosts = async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const data = await response.json();
      console.log(data);

      // Hide the loading screen
      setLoading(false);
      setPosts(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchPosts();
  }, []);


  return (
    <div className="post-gallery">
    {loading && <p>Loading posts...</p>}
    {!loading &&
      posts.map((post) => (
        <div className="post-card" key={post.id}>
          <LazyLoadImage
            src={`https://picsum.photos/id/${post.id}/300/200`}
            alt={`Post ${post.id}`}
            effect="blur"
            height="200"
            width="300"
            placeholderSrc="https://via.placeholder.com/300x200"
            className="post-image"
          />
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
  </div>
  )
}

export default App

import React, { useEffect, useState } from 'react'

import { LazyLoadImage } from 'react-lazy-load-image-component'

import "react-lazy-load-image-component/src/effects/blur.css"

function App() {

const [posts,setPosts] = useState([])

const [loading,setLoading] = useState(true)

const fetchPosts = async () => {

try {

const response = await fetch(

"https://jsonplaceholder.typicode.com/posts"

);

const data = await response.json();

console.log(data);

// Hide the loading screen

setLoading(false);

setPosts(data);

} catch (error) {

console.log(error);

}

};

useEffect(() => {

fetchPosts();

}, []);

return (

{loading && <p>Loading posts...</p>}

{!loading &&

posts.map((post) => (

<LazyLoadImage

src={`https://picsum.photos/id/${post.id}/300/200`}

alt={`Post ${post.id}`}

effect="blur"

height="200"

width="300"

placeholderSrc="https://via.placeholder.com/300x200"

className="post-image"

<h3>{post.title}</h3>

</div>

))}

</div>

)

}

export default App

Build a React.js Project to Implement Lazy Loading of Images From Remote API and Display it in Brows

Comments

Leave a Reply Cancel reply

Archives