# gts-product-card

> Demo libreria

Latest version **1.0.0-rc** (published 2022-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install gts-product-card
pnpm add gts-product-card
yarn add gts-product-card
bun add gts-product-card
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-rc |
| Published | 2022-07-03 |
| First published | 2022-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 146.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jose Gutierrez |
| Maintainers | jocgts |
| Keywords | product, card, Jose, Gutierrez |

## Links

- npm: https://www.npmjs.com/package/gts-product-card
- Repository: https://github.com/josegts/jl-product-card
- npm.io page: https://npm.io/package/gts-product-card

## Recent versions

- 1.0.0-rc (latest) — 2022-07-03
- 0.0.1 — 2022-07-03

## README

# TSDX React User Guide

Demo libreria

### Jose Gutierrez

## ejemple

```
import {
  ProductButtons,
  ProductCard,
  ProductImage,
  ProductTitle
} from '../components';
import { ProductProps } from '../interfaces/Interfaces';
export interface ProductInCard extends ProductProps {
  count: number;
}

const products: ProductProps[] = [
  {
    id: '1',
    title: 'Coffee Mug with a nice picture',
    img: './coffee-mug.png'
  },
  {
    id: '2',
    title: 'Coffee Mug with a nice picture',
    img: './coffee-mug2.png'
  },
  {
    id: '3',
    title: 'Coffee Mug with a nice picture 3',
    img: './coffee-mug.png'
  }
];

export const ShoppingPage = () => {
  return (
    <div>
      <h1>Shopping Store</h1> <hr />
      <ProductCard
        product={products[0]}
        key={products[0].id}
        initialValues={{
          count: 4,
          maxCount: 10
        }}
      >
        {({ count, isMaxCountReached, reset, increaseBy }) => (
          <>
            <ProductImage />
            <ProductTitle title='Cafee' />
            <ProductButtons className='custom-buttons' />
            <button onClick={reset}>reset</button>
            <button onClick={() => increaseBy(-2)}>-2</button>
            {!isMaxCountReached && <button onClick={() => increaseBy(+2)}>+2</button>}
            <span>{count}</span>
          </>
        )}
      </ProductCard>
    </div>
  );
};

```

---
_Source: https://npm.io/package/gts-product-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._