react-card-component

A flexible and reusable Card component for React applications. This component displays information in a card format, including an image, title, description, date, time, and author.

Installation

Install the package using npm:

npm install @infowind_tech/card

Or using yarn:

yarn add @infowind_tech/card

Usage

Import the Card component in your React file:

import Card from "@infowind_tech/card";

Then, use the component in your JSX, passing the required props:

<Card
  image="path/to/image.jpg"
  title="Card Title"
  description="This is a description of the card content."
  date="2024-07-29"
  time="14:30"
  author="John Doe"
/>

Props

The Card component accepts the following props:

| Prop | Type | Description | | ----------- | ------ | ---------------------------------------- | | image | string | URL or path to the image to be displayed | | title | string | Title of the card | | description | string | Description or content of the card | | date | string | Date associated with the card content | | time | string | Time associated with the card content | | author | string | Author of the card content |

Example

Here's a complete example of how to use the Card component in a React application:

import React from "react";
import Card from "@infowind_tech/card";

const App = () => {
  return (
    <div className="app">
      <h1>My Blog Posts</h1>
      <Card
        image="https://example.com/image.jpg"
        title="Getting Started with React"
        description="Learn the basics of React and start building your first application."
        date="2024-07-29"
        time="10:00 AM"
        author="Jane Smith"
      />
      <Card
        image="https://example.com/another-image.jpg"
        title="Advanced React Patterns"
        description="Explore advanced React patterns to build scalable and maintainable applications."
        date="2024-07-30"
        time="2:30 PM"
        author="John Doe"
      />
    </div>
  );
};

export default App;

Customization

The Card component uses CSS modules for styling. You can override the default styles by passing a className prop to the Card component. For more extensive customization, you can create your own CSS file and import it in your project.

TypeScript Support

This package includes TypeScript definitions. You can import the CardProps interface if you need to use the prop types:

import { Card, CardProps } from "@infowind_tech/card";

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Support

If you encounter any problems or have any questions, please open an issue in the GitHub repository.