Inline edit

An inline edit displays a custom input component that switches between reading and editing on the same page.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { InlineEdit } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
defaultValue *	string	—	The current value, shown as text until the reader starts editing.
label *	string	—	Names the field. It is announced when editing begins, so it is required.
placeholder	string	'Click to enter a value'	Shown when the value is empty. Say what would go here.
onConfirm	(value: string) => void	—	Called with the new value when the edit is confirmed. Saving it is yours to do.

What the component does for you, and what it needs from you.

The reading view is a button, so it is reachable with Tab and says that it can be edited.
The label is announced when editing begins, which is why it cannot be left out.
Enter confirms and Escape abandons the edit, so the keyboard has both outcomes.