42 - Responsive E-commerce Product Grid

Description

Build a React component for a product grid that adapts to screen sizes, efficiently manages product data, and provides interactive features.

• Use React's useState hook to manage an array of product data.

• Render product grid items using a loop (e.g., map) within a flexible grid structure.

• Dynamically adjust the grid layout using CSS media queries within React's useEffect hook.

• Implement hover effects or animations with React's state management and CSS transitions or animations.

• Potentially incorporate features like infinite scrolling or filtering for enhanced user experience.

Algorithm

1. Create a React component for the product grid with properties for product data and grid options.

2. Use useState to store and manage product data.

3. Employ useEffect to handle media queries and adjust grid layout based on viewport width.

4. Render product items using a loop, passing necessary data to child components (e.g., ProductCard).

5. Implement hover effects or animations using React's state and CSS transitions or animations.

6. Potentially explore advanced features like infinite scrolling or filtering using React's techniques for data fetching and component management.

Code

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

const ProductGrid = ({ products, columns }) => {
  const [gridColumns, setGridColumns] = useState(columns);

  useEffect(() => {
    const handleResize = () => {
      // Adjust grid columns based on screen width using media queries
      if (window.innerWidth < 768) setGridColumns(2);
      else if (window.innerWidth < 1024) setGridColumns(3);
      else setGridColumns(products.length > 4 ? 4 : products.length); // Use flexible layout for desktop based on product count
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className="product-grid">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} columns={gridColumns} />
      ))}
    </div>
  );
};

export default ProductGrid;

const ProductCard = ({ product, columns }) => {
  const { image, title, description, price } = product;

  return (
    <div className={`product-card col-${columns}`}>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
      <span>{price}</span>
      {/* Add hover effects or animations here using CSS and React state */}
    </div>
  );
};

Explanation

• ProductGrid component receives product data and initial column options via props.

• useState manages the dynamic number of grid columns based on screen size.

• useEffect listens for window resize and adjusts columns using media queries.

• The grid renders ProductCard components for each product in the data array.

• Each ProductCard displays product details and can be further customized with styling and interactivity.

Additional Notes

• This is a basic example, and you can customize it extensively.

• Add CSS styles for grid layout, card design, and responsive adjustments.

• Utilize CSS transitions or libraries like React Motion for interactive animations.

• Integrate features like infinite scrolling, product filtering, and navigation links.