Components

Carousel(React)

Grouped content that is navigated horizontally.

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

The Carousel component is a low-level controlled component. It displays multiple items in a row and animates when the selectedIndex changes. It is infinite by default and the contents are draggable by touch devices.

class CarouselDemo extends React.Component {
    constructor() {
        this.state = {
            selectedIndex: 0,
        };

        this.onSelectedIndexChange = this.onSelectedIndexChange.bind(this);
    }

    onSelectedIndexChange(newIndex) {
        this.setState({ selectedIndex: Math.round(newIndex) });
    }

    render() {
        return (
            <Carousel
                visibleCount={3}
                spacing="16px"
                selectedIndex={this.state.selectedIndex}
                onSelectedIndexChange={this.onSelectedIndexChange}
            >
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Personal Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/328491711124668465/small/standard/hero"
                    />
                    <ServiceCardTitle>Personal Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Dog Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761411685384319/small/standard/hero"
                    />
                    <ServiceCardTitle>Dog Training</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Local Moving (under 50 miles)"
                        url="https://picsum.photos/666/417/?image=300"
                    />
                    <ServiceCardTitle>Local Moving (under 50 miles)</ServiceCardTitle>
                </ServiceCard>
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Massage Therapy"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761720722374783/small/standard/hero"
                    />
                    <ServiceCardTitle>Massage Therapy</ServiceCardTitle>
                </ServiceCard>
            </Carousel>
        );
    }
}

Props

  • children
    required

    The items in the carousel that appear horizontally.

    Type
    node
  • selectedIndex
    required

    The index of the left-most item to display in the carousel. Supports all numbers.

    Type
    number
  • onSelectedIndexChange
    required

    This function is called while a user is dragging the carousel and receives the new index. This should update the selectedIndex prop similarly to an onChange in a controlled input.

    Type
    func
  • visibleCount

    The number of items that are visible at once.

    Type
    number
    Default
    1
  • spacing

    The amount space separating each item. Supports CSS values such as 8px or 0.5em.

    Type
    string
    Default
    '0px'