ts-card-container

Package to render cards with dynamic data and styles.

Prerequisites

Before using ts-card-container, ensure you have the following prerequisites:

• Node.js version 20 or higher.
• React version 18 or higher.

Installation

ts-card-container

ts-card-container is available as an npm package.

npm:

npm i ts-card-container

yarn:

yarn add ts-card-container

Getting started with ts-card-container

Simple example

import React from "react";
import TsContainer from "ts-card-container/dist/TsContainer"; // Importing TsContainer component from TsContainer package

// Array containing data for cards
const cardsData = [
  {
    title: "Laptop",
    sum: 1200,
  },
  {
    title: "Smartwatch",
    sum: 250,
  },
  {
    title: "Headphones",
    sum: 100,
  },
  {
    title: "Camera",
    sum: 800,
  },
  {
    title: "Sneakers",
    sum: 80,
  },
];

function App() {
  return (
    // Container div with inline styling for width
    <div style={{ width: "50%" }}>
      {/* TsContainer component */}
      <TsContainer
        // Props for TsContainer component
        width="50%" // Width of the card
        height={300} // Height of the card
        backgroundColor="white" // Background color of the card
        direction="row" // Direction of the card content (row/column)
        gap={20} // Gap between card items
        contentPosition={"center"} // Position of the content inside the card
        cardPadding={10} // Padding of the card content
        borderWidth={"1px"} // Width of the card border
        borderStyle={"dashed"} // Style of the card border
        borderColor={"red"} // Color of the card border
      >
        {/* Mapping over the cardsData array to render each card */}
        {cardsData.map((item) => {
          return <div>{item.title}</div>; // Rendering title of each card
        })}
      </TsContainer>
    </div>
  );
}

export default App; // Exporting the App component

Complex Example

import React from "react";
import TsContainer from "ts-card-container/dist/TsContainer";

const cardsData = [
  {
    title: "Laptop",
    sum: 1200,
  },
  {
    title: "Smartwatch",
    sum: 250,
  },
  {
    title: "Headphones",
    sum: 100,
  },
  {
    title: "Camera",
    sum: 800,
  },
  {
    title: "Sneakers",
    sum: 80,
  },
];

function App() {
  return (
    <div style={{ width: "70%" }}>
      {/* TsContainer component */}
      <TsContainer
        width="50%" // Width of the card
        height={300} // Height of the card
        backgroundColor="white"
        direction="row"
        gap={20}
        contentPosition="space-around"
        cardPadding={10}
        borderWidth="1px"
        borderStyle="dashed"
        borderColor="black"
      >
        {/* Mapping over the cardsData array to render each card */}
        {cardsData.map((item, index) => (
          <TsContainer
            key={index}
            direction="column"
            backgroundColor="orange"
            borderRadius="5px"
            cardPadding="10px"
          >
            {/* Content inside TsContainer */}

            <div style={{ width: "100px" }}>
              {/* Title of the card */}
              <strong>{item.title}</strong>
            </div>
            <div>
              {/* Sum of the item */}${item.sum}
            </div>
          </TsContainer>
        ))}
      </TsContainer>
    </div>
  );
}

export default App;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.