@inline-edit/react

@inline-edit/react

Headless, composable editable text components for React. Full keyboard support, accessible, and infinitely customizable.

Basic Usage

Click to edit me

Click to edit · Press Enter or click outside to save · Escape to cancel

With Edit/Submit/Cancel Buttons

Edit me with buttons

activationMode="none" · submitMode="none" · Uses trigger buttons

Placeholder

Empty — click to add

Shows different placeholders for edit and preview modes

Controlled

Controlled value
Current: "Controlled value"

Double-Click Activation

Double-click me to edit

activationMode="dblclick" · Double-click to enter edit mode

onSubmit Callback

Edit and submit me

Disabled & Read-Only

I'm disabled

disabled=true

I'm read-only

readOnly=true

Max Length

Max 20 chars

maxLength=20 · Try typing more than 20 characters

Auto Resize

The input automatically grows to match content width using CSS grid overlay:

Hello, my name is
Jane
and I like
coding

autoResize=true · Input width matches preview content · Uses CSS grid stacking