@veeyaainnovatives/blog-card

A reusable Blog card component for React applications.

Installation

npm install @veeyaainnovatives/blog-card --save

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)
• react-router-dom (^6.0.0)

Usage

import { BlogCard } from '@veeyaainnovatives/blog-card';
import { Link } from 'react-router-dom';
import placeholderImage from './path/to/placeholder.png';

const blogs = [
  {
    id: 1,
    title: 'Blog Title',
    excerpt: 'Blog excerpt...',
    image: 'https://example.com/image.jpg',
    slug: 'blog-slug',
    category: 'Technology',
    updated_at: '2024-01-01T00:00:00Z',
    author: 'John Doe'
  }
];

function App() {
  return (
    <BlogCard
      blogs={blogs}
      placeholderImage={placeholderImage}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | blogs | Array | Required | Array of blog objects | | placeholderImage | string | Required | Placeholder image URL for blogs without images | | categoryColors | Object | {} | Custom category color mapping | | getTimeAgo | Function | defaultGetTimeAgo | Custom function to format time ago | | getCategory | Function | defaultGetCategory | Custom function to extract category | | getCategoryColor | Function | defaultGetCategoryColor | Custom function to get category color | | LinkComponent | Component | Link (react-router-dom) | Custom link component | | className | string | "g-4" | Row className | | cardClassName | string | "blog-card-modern mb-4" | Card wrapper className | | imageWrapperClassName | string | "blog-card-image-wrapper" | Image wrapper className | | imageClassName | string | "blog-card-img-modern" | Image className | | categoryTagClassName | string | "blog-category-tag" | Category tag className | | contentClassName | string | "blog-card-content" | Content wrapper className | | titleClassName | string | "blog-card-title-modern" | Title className | | descClassName | string | "blog-card-desc-modern" | Description className | | authorClassName | string | "blog-card-author" | Author section className | | authorLeftClassName | string | "blog-author-left" | Author left section className | | authorAvatarClassName | string | "blog-author-avatar" | Author avatar className | | authorInfoClassName | string | "blog-author-info" | Author info className | | authorNameClassName | string | "blog-author-name" | Author name className | | authorTimeClassName | string | "blog-author-time" | Author time className | | arrowLinkClassName | string | "blog-arrow-link" | Arrow link className | | colProps | Object | { lg: 4, md: 6 } | Column props for react-bootstrap Col |

Blog Object Structure

Each blog object should have the following structure:

{
  id: Number,              // Unique identifier
  title: String,           // Blog title
  excerpt: String,         // Blog excerpt/description
  image: String,          // Blog image URL
  slug: String,           // Blog slug for routing
  category: String|Object, // Blog category
  updated_at: String,     // ISO date string
  created_at: String,     // ISO date string (fallback for timeAgo)
  author: String,         // Author name (or writer, user.name, created_by.name)
}

Custom Category Colors

You can provide custom category colors:

<BlogCard
  blogs={blogs}
  placeholderImage={placeholderImage}
  categoryColors={{
    'Technology': '#3B82F6',
    'Design': '#8B5CF6',
    'Custom': '#FF0000'
  }}
/>

License

MIT