0.1.3 • Published 3 years ago
react-card-shopping v0.1.3
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 --saveO yarn:
yarn add react-card-shoppingEl 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. |