@thumbtack/tp-ui-react-input-row v0.2.4

package: '@thumbtack/tp-ui-react-input-row' kit: layout/input-row.yaml platform: react

url: /api/components/layout/input-row/react/

import Alert from './../../../../www/src/components/alert';

Examples

InputRow with an Input and Button

The widthRatios prop in this example tells the input to take up as much space as possible.

<InputRow widthRatios={[1, null]}>
    <Input placeholder="Enter a zip code" onChange={() => {}} />
    <Button>Find a pro</Button>
</InputRow>

Custom components within InputRow

The Input and Button components use React's Context API to remove their rounded borders when used within an InputRow.

The InputRow exports its React context as InputRowContext. This makes it possible to use custom components within InputRow.

To use InputRowContext, start by importing it within your component:

import { InputRowContext } from '@thumbtack/tp-ui-react-input-row';

Within your component's JSX, you'll use <InputRowContext.Consumer> to gain access to three booleans: isWithinInputRow, isFirstInputRowChild, isLastInputRowChild.

Here's an example:

<InputRowContext.Consumer>
    {({ isWithinInputRow, isFirstInputRowChild, isLastInputRowChild }) => <div />}
</InputRowContext.Consumer>

We recommend doing the following with these booleans:

• Remove your component's right border when isWithinInputRow && !isLastInputRowChild.
• Remove left rounded corners when isWithinInputRow && !isFirstInputRowChild.
• Remove right rounded corners when isWithinInputRow && !isLastInputRowChild.

You can learn more about React's Context API in the React documentation.