Components

Editable Text

EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.

The text input inherits all font styling from its parent, to make the edit and read view transition seamless.

Import

Editable: The wrapper component that providers context value.
EditableInput: The edit view of the component. It shows when you click or focus on the text.
EditablePreview: The read-only view of the component.

import { Editable, EditableInput, EditablePreview } from '@outfitio/outkit';

Usage

With custom controls

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to provide access to the internal states of the component.

Ensure you set isPreviewFocusable and submitOnBlur to false for this to work.

Props

Editable Props

Editable component composes the Box component so can pass all Box props. It also has the following custom props:

Name	Type	Default	Description
value	`string`		Text value of the controlled input
defaultValue	`string`		The initial value of the Editable in both edit & preview mode
placeholder	`string`	`"Click to edit..."`	The placeholder text when the value is empty.
isDisabled	`string`		If `true`, the Editable will be disabled.
onChange	`func`		Callback invoked when user changes input.
onCancel	`string`		Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.
onSubmit	`string`		Callback invoked when user confirms value with `enter` key or by blurring the input.
onEdit	`string`		Callback invoked once the user enters edit mode.
isPreviewFocusable	`boolean`	`true`	If `true`, the read only view, has a `tabIndex` set to `0` so it can recieve focus via the keyboard or click.
startWithEditView	`boolean`		If `true`, the Editable will start with edit mode by default.
submitOnBlur	`boolean`	`true`	If `true`, it'll update the value onBlur and turn off the edit mode.
selectAllOnFocus	`boolean`	`true`	If `true`, the input's text will be highlighted on focus.
children	`React.ReactNode`		The content of the EditableText. Ideally only `EditablePreview` and `EditableInput` should be the children but you add other elements too

EditableInput Props

EditableInput composes PseudoBox so you can pass all PseudoBox props.

EditablePreview Props

EditablePreview composes PseudoBox so you can pass all PseudoBox props.