Components

Wrap(React)

Max-width wrappers for pages and components.

Version:	`14.16.0` •View source•Changelog•Report 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.

Hello

<Wrap>
    <div className="ba b-green">Hello</div>
</Wrap>

<Wrap>
    <div className="ba b-green">Hello</div>
</Wrap>

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

Hello

<Wrap bleedBelow="medium">
    <div className="ba b-green">Hello</div>
</Wrap>

<Wrap bleedBelow="medium">
    <div className="ba b-green">Hello</div>
</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