Components

Wrap(React)

Max-width wrappers for pages and components.

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

Basic wrap

Basic wrapper with a max-width and side padding.

Wrap with no bleed

Hello

Wrap bleed

In some cases you’ll want the wrapper to be full width with no padding on smaller screens, below a certain breakpoint.

Wrap with bleed below medium

Hello

Props

Wrap

  • children

    Component to be wrapped.

    Type
    React.ReactNode
  • bleedBelow

    Breakpoint at which the wrapper should remove horizontal margin to bleed to the edge of the viewport. Defaults to undefined, in which case it never does this.

    Type

    This prop can be one of the following 3 types:

    • 'small'
    • 'medium'
    • 'large'
  • dataTestId

    A selector to hook into the React component for use in automated testing environments.

    Type
    string
  • dataTest
    deprecated

    A selector to hook into the React component for use in automated testing environments.

    Note: Deprecated in favor of the `dataTestId` prop

    Type
    string