Components

Image(React)

Commonly used image styles.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { Image } from '@thumbtack/thumbprint-react';

Image

<Image
    src="https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1024.jpeg"
    alt="Photo of a cat lying down"
    containerAspectRatio={823 / 548}
/>

Two side-by-side images

<div className="flex">
    <Image
        src="https://d1vg1gqh4nkuns.cloudfront.net/i/302056478120263859/width/1024.jpeg"
        alt="Photo of a sprinker"
        containerAspectRatio={768 / 400}
        style={{ width: '50%' }}
        className="mr1"
    />
    <Image
        src="https://d1vg1gqh4nkuns.cloudfront.net/i/327896627728072894/width/1024.jpeg"
        alt="Photo of grass with concrete steps"
        containerAspectRatio={768 / 400}
        className="ml1 w-50"
    />
</div>

Props

Image

  • src
    required

    If sources is provided, this image will be loaded by search engines and lazy-loaded for users on browsers that don’t support responsive images. If sources is not provided, this image will be lazy-loaded unless disableLazyLoading is true.

    Type
    string
  • sources

    Allows the browser to choose the best file format and image size based on the device screen density and the width of the rendered image.

    Type
    arrayOf
    Default
    []
  • alt
    Type
    string
    Default
    ''
  • height

    Crops the image at the provided height. The objectFit and objectPosition props can be used to control how the image is cropped.

    Type
    string
    Default
    undefined
  • containerAspectRatio

    Crops the image to a specific aspect ratio and creates a placeholder box for the image. The placeholder prevents the browser scroll from jumping when the image is lazy-loaded.

    Type
    number
    Default
    undefined
  • objectFit

    Provides control over how an image should be resized to fit the container. This controls the object-fit CSS property. It is only useful if height or containerAspectRatio are used to “crop” an image.

    Type
    oneOf([
      'cover',
      'contain',
    ]);
    Default
    'cover'
  • objectPosition

    Provides control over how an image aligned in the container. This controls the object-position CSS property. It is only useful if height or containerAspectRatio are used to “crop” an image.

    Type
    oneOf([
      'top',
      'center',
      'bottom',
      'left',
      'right',
    ]);
    Default
    'center'
  • disableLazyLoading

    Loads the image immediately rather than waiting for the user to scroll to it.

    Type
    bool
    Default
    false