react-single-product-page

A fully customizable React component for rendering a detailed single product page with a clean, responsive design.

Features

• 📱 Responsive layout for all device sizes
• 🖼️ Dynamic product image gallery
• 🔢 Size and quantity selectors
• 🛒 Add to Cart functionality
• ❤️ Wishlist and share options
• 📦 Expandable sections for product details, shipping info, and customer reviews
• 🎨 Easily customizable with standard CSS (no Tailwind dependencies)

Installation

npm install react-single-product-page

Peer Dependencies

Ensure you have the following peer dependencies installed:

npm install react lucide-react

Quick Start

1. Import the component and its styles:

import SingleProductPage from "react-single-product-page";
import "react-single-product-page/dist/styles.css";

2. Use the component in your React application:

function App() {
  const product = {
    name: "Perfectly Imperfect Half Sleeve Unisex T-Shirt",
    price: 6.0,
    description:
      "Embrace your uniqueness with our Perfectly Imperfect t-shirt.",
    imageUrl: "/path/to/main-image.jpg",
    additionalImages: [
      "https://via.placeholder.com/100x100",
      "https://via.placeholder.com/100x100",
      "https://via.placeholder.com/100x100",
      "https://via.placeholder.com/100x100",
    ],
    rating: 4.5,
    reviewCount: 123,
    sizes: ["XS", "S", "M", "L", "XL"],
    colors: ["#000000", "#FFFFFF", "#008000", "#0000FF"],
    detailedDescription: "This t-shirt is made from 100% organic cotton...",
    features: [
      "100% organic cotton",
      "Unisex fit",
      "Available in multiple colors",
      "Machine washable",
    ],
    shippingInfo: "Free shipping on all orders over $50...",
    returnPolicy:
      "We offer a 30-day return policy for all unworn and unwashed items.",
    reviews: [
      {
        rating: 5,
        title: "Great shirt!",
        comment:
          "Fits perfectly and the material is so soft. Highly recommend!",
        author: "Jane D.",
        date: "2023-05-15",
      },
      // More reviews...
    ],
  };

  return (
    <div className="App">
      <SingleProductPage product={product} />
    </div>
  );
}

API Reference

Props

The SingleProductPage component accepts a single product prop with the following structure:

type Product = {
  name: string;
  price: number;
  description: string;
  imageUrl: string;
  additionalImages: string[];
  rating: number;
  reviewCount: number;
  sizes: string[];
  colors: string[];
  detailedDescription: string;
  features: string[];
  shippingInfo: string;
  returnPolicy: string;
  reviews: {
    rating: number;
    title: string;
    comment: string;
    author: string;
    date: string;
  }[];
};

Customization

To customize the component's appearance:

1. Create a new CSS file (e.g., custom-product-page.css)
2. Import it after the component's default styles:

import "react-single-product-page/dist/styles.css";
import "./custom-product-page.css";

3. Override existing classes in your custom CSS file:

.product-title {
  font-size: 28px;
  color: #333;
}

.add-to-cart-button {
  background-color: #ff5722;
}

Development

To contribute or modify the package:

1. Clone the repository:

   git clone https://github.com/waleedcodes/Single-Product-Page-Component.git

2. Install dependencies:

   cd react-single-product-page
   npm install

3. Make changes to src/SingleProductPage.js and src/styles.css

4. Build the package:

   npm run build

5. Test locally using npm link:

   npm link

   In your test project:

   npm link react-single-product-page

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for details.