Editable
Editable can be used to create editable fields, where default view should be a text.
pnpm dlx dreamy add editableEditable is a component that allows you to edit text, in a compact way.
The placeholder will be shown in the preview, when the value is empty.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound">
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Editable can be used to trigger edit mode on double click. Double click the preview to enter edit mode, enter to submit, esc to cancel.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound" useDoubleClick>
<Editable.Preview />
<Editable.Input />
</Editable.Root>Use value and onChange to control the editable value.
function ControlledEditable() {
const [value, setValue] = useState("Meow");
return (
<Editable.Root value={value} onChange={setValue}>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>
);
}isEditing: false
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound">
{({ isEditing, onSubmit, onCancel, onEdit }) => {
return (
<>
<Text>isEditing: {isEditing ? "true" : "false"}</Text>
<Editable.Preview />
<Editable.Input />
</>
);
}}
</Editable.Root>Use startWithEditView to use edit state by default. Click "Render" to render the editable.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound" startWithEditView>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Use isPreviewFocusable to control whenever the preview should be focusable, that means it can be focused via keyboard or click. It is true by default.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound" isPreviewFocusable={false}>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Use submitOnBlur to control when the value should be submitted on blur. Default is true. This example won't submit, when blur happens.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound" submitOnBlur={false}>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Use onCancel, onSubmit, onEdit, onBlur to handle the editable events. Open the console
<Editable.Root
defaultValue="Meow"
placeholder="Enter an animal sound"
onCancel={() => toast({ title: "onCancel" })}
onSubmit={() => toast({ title: "onSubmit" })}
onEdit={() => toast({ title: "onEdit" })}
onBlur={() => toast({ title: "onBlur" })}
>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Whenever text in input should be selected when entering edit mode.
<Editable.Root defaultValue="Meow" placeholder="Enter an animal sound" selectAllOnFocus={false}>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>Use finalFocusRef to set the ref of element to receive focus when edit mode exits.
function FinalFocusRefEditable() {
const ref = useRef<HTMLButtonElement>(null);
return (
<>
<Button ref={ref}>I receive focus</Button>
<Editable.Root defaultValue="Meow" finalFocusRef={ref}>
<Editable.Preview />
<Editable.Input />
<HStack>
<Editable.EditButton />
<Editable.SubmitButton />
<Editable.CancelButton />
</HStack>
</Editable.Root>
</>
);
}