Component

Inline Editor

An inline view/edit toggle component for editing text content in place. Uses the headless @refraction-ui/inline-editor core.

Examples

Click to toggle between view and edit mode.

Click to edit this text. Double-click or press the edit button to enter editing mode.

Installation

$pnpm add @refraction-ui/react-inline-editor

Usage

tsx

import { InlineEditor } from '@refraction-ui/react-inline-editor'

export function MyComponent() {
  const [text, setText] = useState('Edit me')
  return <InlineEditor value={text} onChange={setText} />
}

Props

Prop	Type	Default	Description
`value`	`string`	--	Content value.
`onChange`	`(value: string) => void`	--	Callback when content changes.
`className`	`string`	--	Additional CSS classes.