Products Card (npm-package)

This npm package provides a reusable product card that you can easily integrate into your web applications. The product card follows the "function child" pattern, meaning it is made up of smaller, more flexible components.

Facility

To install this package, simply run the following command:

npm install products-card

Use

Here is a basic example of how you can use the product card in your app:

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

// ...

function App() {
  const product = {
    id: 1,
    title: 'New product',
    image: './images/product.png',
  }

  return (
    <div>
      <h1>Product List</h1>
      <ProductCard
        product={product}
      >
        {
          () => (
            <>
              <ProductImage />
              <ProductTitle />
              <ProductButtons />
            </>
          )
        }
      </ProductCard>
    </div>
  );
}

export default App;

And if you want use the children function props yo can make this:

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

// ...

function App() {
  const product = {
    id: 1,
    title: 'New product',
    image: './images/product.png',
  }

  return (
    <div>
      <h1>Product List</h1>
      <ProductCard
        product={product}
        initialValues={{
          count: 4,
          maxCount: 10
        }}
      >
        {
          ({count, isMaxCountReached, maxCount, product, increaseBy, reset}) => (
            <>
              <ProductImage />
              <ProductTitle />
              <ProductButtons />
              <h1>{count}</h1>
              <button onClick={()=>increaseBy(2)}>+2</button>
              <button onClick={reset}>reset</button>
              {isMaxCountReached && <span>maximum amount of {product.title} reached ({maxCount})</span>}
            </>
          )
        }
      </ProductCard>
    </div>
  );
}

export default App;