# aag-product-card

> Este es un paquete de pruebas de despliegue en npm

Latest version **1.0.0-rc** (published 2021-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install aag-product-card
pnpm add aag-product-card
yarn add aag-product-card
bun add aag-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 | 2021-12-14 |
| First published | 2021-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 151.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adrián Antón |
| Maintainers | adriton |
| Keywords | product, card, adrian, anton |

## Links

- npm: https://www.npmjs.com/package/aag-product-card
- Repository: https://github.com/AdrianAntonGarcia/aag-product-card
- Homepage: https://github.com/AdrianAntonGarcia/aag-product-card#readme
- Issues: https://github.com/AdrianAntonGarcia/aag-product-card/issues
- npm.io page: https://npm.io/package/aag-product-card

## Recent versions

- 1.0.0-rc (latest) — 2021-12-14
- 0.0.1 — 2021-12-14

## README

# AAG-Product-Card

Este es un paquete de pruebas de despliegue en npm

## Adrián Antón

```
import {
    ProductCard,
    ProductImage,
    ProductTitle,
    ProductButtons
} from 'aag-product-card'
```

```
const product1 = {
  id: '1',
  title: 'Coffee Mug - Card',
  img: './coffee-mug.png',
};

const product2 = {
  id: '2',
  title: 'Coffee Mug - Meme',
  img: './coffee-mug2.png',
};
const products = [product1, product2];
const product = products[0];

<ProductCard
        key={product.id}
        product={product}
        className="bg-dark text-white"
        initialValues={{ count: 0, maxCount: 10 }}
      >
    {({ reset, count, increaseBy, isMaxCountReached, maxCount }) => (
        <>
        <ProductCard.Image className="custom-image" />
        <ProductCard.Title className="text-bold" />
        <ProductCard.Buttons className="custom-buttons" />
        <button onClick={reset}>Reset</button>
        <button onClick={() => increaseBy(-2)}>-2</button>
        {!isMaxCountReached && (
            <button onClick={() => increaseBy(2)}>+2</button>
        )}
        <span>
            {count}-{maxCount}
        </span>
        </>
    )}
</ProductCard>
```

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