Editable - Dreamy UI

Editable

Editable can be used to create editable fields, where default view should be a text.

#

Import

Editable - The context for the editable, renders a 'div' by default.
EditablePreview - The text preview for the editable.
EditableInput - The input for the editable, when in edit mode.
EditableEditButton - The button to trigger edit mode.
EditableSubmitButton - The button to submit the editing value, when in edit mode.
EditableCancelButton - The button to cancel the editing, when in edit mode.

import { 
	Editable, 
	EditablePreview, 
	EditableInput, 
	EditableEditButton, 
	EditableSubmitButton, 
	EditableCancelButton
} from "@dreamy-ui/react";

#

Usage

Basic usage of Editable. Placeholder will be shown, when the value is empty.

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound">
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

Double Click

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.

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound" useDoubleClick>
	<EditablePreview />
	<EditableInput />
</Editable>

#

Controlled

Use value and onChange to control the editable value.

Meow

function ControlledEditable() {
	const [value, setValue] = useState("Meow");
 
	return (
		<Editable value={value} onChange={setValue}>
			<EditablePreview />
			<EditableInput />
			<HStack>
				<EditableEditButton />
				<EditableSubmitButton />
				<EditableCancelButton />
			</HStack>
		</Editable>
	);
}

#

Accessing internal state

isEditing: false

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound">
	{({ isEditing, onSubmit, onCancel, onEdit }) => {
		return (
			<>
				<Text>isEditing: {isEditing ? "true" : "false"}</Text>
				<EditablePreview />
				<EditableInput />
			</>
		);
	}}
</Editable>

#

Start with edit view

Use startWithEditView to use edit state by default. Click "Render" to render the editable.

<Editable defaultValue="Meow" placeholder="Enter an animal sound" startWithEditView>
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

Is preview focusable

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.

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound" isPreviewFocusable={false}>
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

Submit on blur

Use submitOnBlur to control when the value should be submitted on blur. Default is true. This example won't submit, when blur happens.

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound" submitOnBlur={false}>
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

onCancel, onSubmit, onEdit, onBlur

Use onCancel, onSubmit, onEdit, onBlur to handle the editable events. Open the console

Meow

<Editable 
	defaultValue="Meow" 
	placeholder="Enter an animal sound" 
	onCancel={() => toast({ title: "onCancel" })} 
	onSubmit={() => toast({ title: "onSubmit" })} 
	onEdit={() => toast({ title: "onEdit" })} 
	onBlur={() => toast({ title: "onBlur" })}
>
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

Select all on focus

Whenever text in input should be selected when entering edit mode.

Meow

<Editable defaultValue="Meow" placeholder="Enter an animal sound" selectAllOnFocus={false}>
	<EditablePreview />
	<EditableInput />
	<HStack>
		<EditableEditButton />
		<EditableSubmitButton />
		<EditableCancelButton />
	</HStack>
</Editable>

#

Final Focus Ref

Use finalFocusRef to set the ref of element to receive focus when edit mode exits.

Meow

function FinalFocusRefEditable() {
	const ref = useRef<HTMLButtonElement>(null);
 
	return (
		<>
			<Button ref={ref}>I receive focus</Button>
 
			<Editable defaultValue="Meow" finalFocusRef={ref}>
				<EditablePreview />
				<EditableInput />
				<HStack>
					<EditableEditButton />
					<EditableSubmitButton />
					<EditableCancelButton />
				</HStack>
			</Editable>
		</>
	);
}