Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn inline rename that checks the name against existing ones when you save, ignoring case and the item's own current name, and says which name clashes.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when names must be unique inside a scope (workspaces, projects, folders, environments) and the person edits them in place.
Do not use it when uniqueness is global and the check is slow or rate limited (then validate on a debounce with a field-level hint).
It composes inline-edit, which the CLI installs for you.
import { InlineEditUniqueName } from "@/components/inline-edit-unique-name"<InlineEditUniqueName
name={project.name}
existing={otherProjects.map((p) => p.name)}
isTaken={(n) => api.nameTaken(n)}
onRename={(next) => api.rename(project.id, next)}
/>| Prop | Type | Required | Description |
|---|---|---|---|
name | string | required | - |
existing | string[] | required | Other names that are taken (the current name does not count). |
isTaken | (name: string) => Promise<boolean> | optional | Optionally ask the server too, for names the client cannot know. Return true if taken. |
onRename | (next: string) => void | Promise<void> | required | - |
label | string | optional | - |
The pattern ships with a Testing Library test (inline-edit-unique-name.test.tsx) that covers clashes ignoring case, a case change of the own name, the server check and a free name.