Inline editdata-display

Click-to-edit text whose read and edit views look the same, with visible save and cancel, IME-safe Enter and Esc, async save with pending, error and rollback.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/inline-edit

의존 아이템button input locale style textarea

Default

Saved: Seaside Villa

inline-edit-demo.tsx

"use client";
import * as React from "react";import { InlineEdit } from "@/components/ui/inline-edit";
export default function InlineEditDemo() {  const [name, setName] = React.useState("Seaside Villa");  return (    <div className="flex w-80 flex-col gap-2">      <InlineEdit        label="property name"        value={name}        onSave={async (next) => {          await new Promise((resolve) => setTimeout(resolve, 100));          setName(next);        }}        validate={(next) => (next.trim() === "" ? "Name is required" : null)}      />      <p className="text-sm text-muted-foreground">Saved: {name}</p>    </div>  );}