React Card Shopping

Componente de react para mostrar productos de comercio en tarjetas

Getting started

instalar react card shopping via npm:

npm i react-card-shopping --save

O yarn:

yarn add react-card-shopping

El paquete exporta por defecto el componente de card.

import CardShopping from 'react-card-shopping';
import 'react-card-shopping/src/card.css';

Example:

  <CardShopping
    alert
    title='Titulo del producto',
    price={13}
    source="https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    discount={9}
    avalible={150}
    addToCart={() => console.log('agregado al carrito')}
  />

You can find more examples here: LIVE DEMO

Configuration

Supports the following props for configuring the widget:

Prop name	Type	Default value	Description
title	string	'Lorem Ipsum'	Es el titulo del producto, por defecto sera 'Lorem ipsum para ejemplos '
source	string	fetch photo pexel	Obtiene imagen del producto del repositorio de pexel
price	number	'0'	El precio por defecto sera 0 pero es recomendable que sea un numero mayor
discount	number	'0'	El componente solo reacciona cuando el descuento es mayor a 0 y retorna el nuevo precio
avalible	number	'0'	Es el numero de productos que tienes disponibles.
addToCart	function	false	Funcion que se ejecuta cuando dan click en el boton de AÑADIR AL CARRITO.
favorite	function	false	Funcion que se ejecuta cuando dan click en producto favorito.
isFav	boolean	false	Muestra si el producto es favorito o no.
alert	boolean	false	Muestra una alerta dinamica mostrando al usuario el producto agregado al carrito.
tag	string	''	Muestra una etiqueta en la parte superior de la tarjeta.
color	object	undefined	Recibe 2 propiedades 'background' y 'text' donde modificaran los colores de la tarjeta.
className	string	'product display-flex flex-direction'	Clases que usa la tarjeta.