How to Create Dynamic Thumbnails in React JS for a Better User Experience

Nowadays, user experience is a priority, and thumbnails are one of the first interactions users make with the website.

It is much easier to use ReactJS and build customized and dynamic experiences for users with visually appealing interfaces.

ReactJs is considered one of the most dynamic and responsive platforms for building user-interactive web applications. It allows developers to create engaging user interfaces with dynamic updates and animations.

Are you trying to create dynamic thumbnails in React JS? Then don’t worry.

In this blog, you can see a tutorial on how to create dynamic thumbnails in React JS that load efficiently and improve overall user interfaces.

Why Dynamic Thumbnails Matter for User Engagement?

Thumbnails are considered one of the first points of interaction with users. So making those thumbnails dynamic helps to improve the overall interaction. Some of the main ways are mentioned below:

• 1. Responsive UI : Thumbnails that adjust & change based on user interactions provide instant feedback.
• 2. Better Navigation : Dynamic elements help users to smoothly go through the content and improve the overall user journey.
• 3. Optimized Performance : Well-implemented dynamic thumbnails can reduce load times and provide better app performance.

Here are the steps that you need to follow to create dynamic thumbnails in React JS to provide a better user experience.

Step 1: Setting Up the React Js Environment:

Before we start creating dynamic thumbnails in ReactJs, let’s set the ReactJs environment:

• 1. Create a new React app by using Create React App in the Command Prompt:

            npx create-react-app dynamic-thumbnails
          

  Copied!

            cd dynamic-thumbnails
          

  Copied!

• 2. Install the necessary dependencies like react-icons:

            npm install react-icons
          

  Copied!

• 3. You can download the starter code from our GitHub repository and then follow the next steps given below.

Step 2: Creating Static Thumbnails

We will first create static thumbnails before adding the dynamic features. Follow this step because it will set the foundation for your dynamic components.

• 1. Create a Thumbnail.js component inside your src folder:

            import React from 'react';
    
    const Thumbnail = ({ imgSrc, title }) => (
      <div className="thumbnail">
        <img src={imgSrc} alt={title} />
        <h4>{title}</h4>
      </div>
    );
    
    export default Thumbnail;
        

  Copied!

• 2. Now set up a simple array of data in your App.js file:

            const thumbnails = [
        { imgSrc: 'image1.jpg', title: 'Thumbnail 1' },
        { imgSrc: 'image2.jpg', title: 'Thumbnail 2' },
    ];
        

  Copied!

• 3. Display the static thumbnails in the app:

            {thumbnails.map((thumb, index) => (
        <Thumbnail key={index} imgSrc={thumb.imgSrc} title={thumb.title} />
      ))}
        

  Copied!

Step 3: Making Thumbnails Dynamic

Now to make the static thumbnails more interactive, we will include dynamic features like hover effects and conditional rendering based on the user interactions. Explore the steps given below.

3.1: Adding hover effects for Thumbnails

Add an interaction when the user hovers over the thumbnail and changes the thumbnail’s style & also shows additional information related to it.

• 1. Modify the Thumbnail.js file:

          import { useState } from 'react';
      const Thumbnail = ({ imgSrc, title }) => {
        const [hovered, setHovered] = useState(false);
        return (
          <div className="thumbnail"
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
          >
            <img src={imgSrc} alt={title} />
            <h4>{title}</h4>
            {hovered && <p> Hovered content for {title}</p>}
          </div>
        );
      };
    export default Thumbnail;
              

  Copied!

• 2. Style the hover effect in App.css:

          .thumbnail img {
      transition: transform 0.3s;
  }
  .thumbnail:hover img {
      transform: scale(1.1);
  }
              

  Copied!

3.2: Changing Thumbnails Dynamically

You can easily update thumbnails according to user actions & external conditions like scrolling or timed events.

• 1. Use state management in App.js to change the displayed thumbnail:

        const [currentThumbnail, setCurrentThumbnail] = useState(thumbnails[0]);
    const handleClick = (index) => {
      setCurrentThumbnail(thumbnails[index]);
    };
    return (
      <>
        <Thumbnail imgSrc={currentThumbnail.imgSrc} title={currentThumbnail.title} />
         <div>
          {thumbnails.map((thumb, index) => (
            <button key={index} onClick={() => handleClick(index)}>
              {thumb.title}
            </button>
          ))}
        </div>
      </>
    );
        

  Copied!

Step 4: Improving User Experience with Animation

Animations can make your dynamic thumbnails feel more polished and responsive. Use Framer Motion to add smooth and user-friendly animations.

• 1. Install Framer Motion:

            npm install framer-motion
          

  Copied!

• 2. Update the Thumbnail.js file with appropriate animation logic like:

        import { motion } from 'framer-motion';
    const Thumbnail = ({ imgSrc, title }) => (
      <motion.div whileHover={{ scale: 1.05 }} className="thumbnail">
        <div className="thumbnail">
          <img src={imgSrc} alt={title} />
          <h4>{title}</h4>
        </motion.div>
    );
        

  Copied!

Step 5: Optimize the Performance by Using Lazy Loading

To handle large sets of thumbnails it is important to have good performance. That’s why you need to implement lazy loading functionality to prevent the entire page from loading at once.

• 1. Install react lazyload in Command Prompt:

            npm install react-lazyload
          

  Copied!

• 2. Use lazy loading in Thumbnail.js:

        import LazyLoad from 'react-lazyload';
    const Thumbnail = ({ imgSrc, title }) => (
      <LazyLoad height={200}>
        <div className="thumbnail">
          <img src={imgSrc} alt={title} />
          <h4>{title}</h4>
        </div>
      </LazyLoad>
    );
        

  Copied!

Once you complete these steps you are ready to go! Now you can enjoy the dynamic thumbnails that you created using ReactJs. Implementing dynamic thumbnails in React JS is considered one of the best ways to provide attractive and engaging components.

We have worked on a project called Thumbnailcc and from here you can easily download & run its ReactJS Thumbnail code from GitHub to understand how it works. If you want to get a ReactJs-based web, mobile, and desktop applications.

With the steps given in this blog, you can easily create dynamic thumbnails that respond to user interactions, animations for smooth transitions, and improve the performance using lazy loading.

Do you want a feature-rich ReactJs application? Contact Us now to get the best solution.