Image Box

Allow to set an image, with a discount badge and a count badge

How to use it

import { ImageBox } from '@engyalo/storefront-components'

<ImageBox
          discount={20}
          quantity={2}
          imageUrl="https://storage.googleapis.com/yalo-img/pollo-campero/Desayuno-Sandwich-Campero-450x380-pxl.png"          
        />

Props

export interface Props extends HTMLAttributes<BoxProps> {
  discount?: number
  quantity?: number
  imageUrl: string
  size?: string
  hideQuantity?: boolean
  hideDiscount?: boolean
  imageProps?: ImageProps
}

Props Considerations

  • size prop, has only one option Big, and is used to add an extra padding so big images are shown correctly
  • discount prop, will show the text sent in a badge at the upper left side of the image
  • quantity prop, will show the text sent in a badge at the upper right side of the image

Considerations

Image size consideration

  • The image will fill out its parent so to control its size, you may use a Box component to set an specific width and the image will fill that width.

Lazy loading

  • The image is loaded by a lazy loading component to load only the needed images on screen, to avoid loading up lots of images on a list, for example the catalog.

Visual Example


Did this page help you?