@atom-design-mog/cardslist

A fully responsive, customizable product cards grid component for React Native, built for the Atom Design System (Moglix). The layout automatically adjusts based on screen size and supports custom column counts, touch events, and quote actions.

📦 Installation

Install with npm:

npm install @atom-design-mog/cardslist

Or with yarn:

yarn add @atom-design-mog/cardslist

🚀 Usage

import React from 'react';
import CardsList from '@atom-design-mog/cardslist';

export default function Example() {
  const products = [
    {
      id: 1,
      name: "Honeywell 6MP Indoor & Outdoor Fisheye IR IP Camera, HFD6GR1",
      brand: "Honeywell",
      image: "https://cdn.moglix.com/p/foh39PihRTWbF-xxlarge.jpg",
    },
    {
      id: 2,
      name: "Digital Security Camera HD 1080p",
      brand: "Samsung",
      image: "https://atom-react.moglix.com/_next/image?url=%2Fassets%2Fimg%2Fcatedummy.jpg&w=256&q=75",
    },
  ];

  return (
    <CardsList
      products={products}
      numColumns={3}
      onProductPress={(product) => console.log('Product pressed:', product)}
      onQuotePress={(product) => console.log('Quote requested:', product)}
    />
  );
}

🧩 Component Features

• Responsive column layout that adapts to screen width
• Supports custom number of columns via numColumns
• Grid auto-adjusts based on screen width with sensible defaults
• Product image, name & brand display
• “Request Quote” button with callback
• Works inside ScrollView or standalone
• Press handlers for product tap & quote request
• Beautiful shadows, spacing and Atom styling
• Memoized card rendering for performance

📱 Responsive Behavior (Default Auto Columns)

| Screen Width | Columns | | ---: | :--- | | > 1200 px | 5 | | > 992 px | 4 | | > 768 px | 3 | | Below 768 px | 2 |

Override by passing numColumns={1} (or any number) to force a layout.

🧲 Props

| Prop | Type | Description | | ---------------- | ----------------- | ------------------------------------- | | products | Array | Product list (id, name, brand, image) | | numColumns | number | Optional — override auto layout | | onProductPress | (product)=>void | Callback when card image is pressed | | onQuotePress | (product)=>void | Callback for quote button |

🛒 Product Structure

Each product object should have the shape:

{
  "id": 1,
  "name": "Product name",
  "brand": "Brand name",
  "image": "https://.../image.jpg"
}

🧪 Test Screen Example

import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import CardsList from '@atom-design-mog/cardslist';

export default function TestCardsScreen() {
  const products = [
    {
      id: 1,
      name: "Honeywell 6MP Fisheye Camera",
      brand: "Honeywell",
      image: "https://cdn.moglix.com/p/foh39PihRTWbF-xxlarge.jpg",
    },
    {
      id: 2,
      name: "Digital Security Camera HD 1080p",
      brand: "Samsung",
      image: "https://atom-react.moglix.com/_next/image?url=%2Fassets%2Fimg%2Fcatedummy.jpg&w=256&q=75",
    },
  ];

  return (
    <ScrollView>
      <View style={{ padding: 10 }}>
        <Text style={{ marginBottom: 15, fontSize: 18, fontWeight: '600' }}>
          Cards List
        </Text>

        <CardsList
          products={products}
          numColumns={1}
          onProductPress={(p) => console.log('Product pressed:', p)}
          onQuotePress={(p) => console.log('Quote pressed:', p)}
        />
      </View>
    </ScrollView>
  );
}

👤 Author

Avi Gupta