react-product-grid

A React component for displaying products in a grid layout.

Installation

npm install react-product-grid

Usage

import React from "react";
import ProductGrid from "react-product-grid";

const products = [
  {
    id: 1,
    name: "Code Coffee Repeat Half Sleeve Unisex T-Shirt",
    price: 0.5,
    rating: 5.0,
    image: "path/to/image1.jpg",
  },
  // Add more product objects...
];

const App = () => {
  return (
    <div>
      <h1>Our Products</h1>
      <ProductGrid products={products} />
    </div>
  );
};

export default App;

Props

The ProductGrid component accepts a single prop:

• products: An array of product objects. Each product object should have the following properties:
  • id: Unique identifier for the product
  • name: Name of the product
  • price: Price of the product
  • rating: Rating of the product
  • image: URL or path to the product image

Customization

You can customize the styling by wrapping the ProductGrid component and applying your own styles.

License

MIT License

Copyright (c) 2024 Waleed Ishfaq