Recipe Ingredients with a Scaler

ProNew

Ingredient rows with amount, unit and name, and a servings control that scales every amount while keeping the original, with friendly fractions. Use this when a list of quantities must scale together.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

baseServings4

Guide and examples

When to use it

Amounts in a list depend on one multiplier (servings, batch size, headcount).

Do not use it when: Do not scale quantities that do not scale linearly (baking time, seasoning to taste); mark those rows as not scaling.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`baseServings`	`number`	`4`	The servings the amounts are written for.
`initial`	`{ amount, unit, name }[]`	three samples

friendlyAmount(n) is exported.

Accessibility

The rows being edited are the original recipe (the legend says so); the scaled amounts appear in a separate labelled region, so editing never fights the multiplier.
The scale line ("Scaled 1.5 times from 4 servings.") is a polite status. Amounts are written as words people read ("1 1/2 cup"), not as long decimals.
Number inputs have labels and sensible min; the servings field cannot go below 1.

Testing

The pattern ships with a Testing Library test (recipe-ingredients-scaler.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.