Unit Converter Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the recipe: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Convert units button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ConverterFields component and share the block's state, so a number typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The factors in GROUPS are exact decimals (an inch is 2.54 cm by definition, a pound is 453.59237 g), and a conversion is one multiplication and one division through the group's base unit, so the only rounding is the last step, to four significant figures, with Intl.NumberFormat. That is why 1 cup reads 236.6 ml (the exact value is 236.5882365) and never 236.58823650000001. The dialog says "Rounded to 4 significant figures" under every result. Cups, spoons and fluid ounces are the US customary ones. If you need more digits, change maximumSignificantDigits in SHOWN.

Temperatures are not a factor but a formula, so the Temperature tab uses the affine ones: °F = °C × 9 ÷ 5 + 32 and °C = (°F − 32) × 5 ÷ 9, and the line under the rows shows the one in use. A temperature below absolute zero (−273.15 °C, −459.67 °F) is refused in words, "Below absolute zero", and the other field stays empty. Numbers that are not numbers, or that are too large to show, are refused the same way.

Yes. The tabs are a real tab list, each number is a number field named From or To, each unit is a native select named From unit or To unit, and Swap and the presets are buttons. The real dialog is named by its title and described by its sentence, focus starts in the From number and stays inside until the dialog closes, and Escape, Cancel and the close button return focus to Convert units. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The other number follows as you type. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.

It is pure arithmetic, so all of it. Nothing is sent, and the only thing that leaves the dialog is the number Use writes into the drawn recipe line, with a polite message saying nothing was saved. In your app give apply your own write-back (a recipe field, a form value), and add units by adding entries with their exact factor to a group.

The copy shown on load docks to the foot of the page as a bottom sheet, with the tabs, the two rows and the chips scrolling above the pinned Cancel and Use buttons. The tabs share one height, so switching never moves what is under them, and the chips wrap to a second line when the width needs it. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.