Inline edit

An inline edit shows a value that switches between reading and editing on the same page.

Install

One package and one stylesheet. The stylesheet holds the tokens every component uses.

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	None	The current value, shown as text until someone starts editing.
label *	string	None	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	None	Called with the new value when the edit is confirmed. You handle saving it.

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

The value is shown in a button, so people can reach it with Tab and hear that it can be edited.
The label is announced when editing starts, so it is required.
Enter confirms the edit and Escape cancels it.