Editable text

EditableText reads as plain text and turns into an input on click or focus. Use it for inline renames and short descriptions.

Usage#

import { EditableText } from "@clawscale/react";

<EditableText defaultValue="Revenue by region" onConfirm={rename} />

Examples#

Basic#

EditableText inherits font styles, so wrap it in a heading for a title. Enter or blur confirms the edit and calls onConfirm. Escape calls onCancel and restores the last confirmed value. Use value and onChange for controlled use.

Revenue by region

Saved name: Revenue by region

core/editable-text/basic.tsx

import { Classes, EditableText, H4 } from "@clawscale/react";
import { useState } from "react";

const INITIAL_NAME = "Revenue by region";

export default function EditableTextBasic() {
  const [saved, setSaved] = useState(INITIAL_NAME);
  return (
    <div>
      <H4>
        <EditableText
          defaultValue={INITIAL_NAME}
          maxLength={60}
          placeholder="Name this dashboard"
          onConfirm={setSaved}
        />
      </H4>
      <div className={Classes.TEXT_MUTED}>Saved name: {saved}</div>
    </div>
  );
}

Do not center with text-align

text-align: center on a parent causes an endless resize loop. Center EditableText with flexbox instead.

Multiline#

multiline renders a text area that grows between minLines and maxLines. Enter adds a line and Cmd+Enter or Ctrl+Enter confirms. confirmOnEnterKey swaps the two.

Daily snapshot of orders from the sales warehouse. One row per order line, refreshed at 02:00 UTC.

core/editable-text/multiline.tsx

import { EditableText } from "@clawscale/react";

export default function EditableTextMultiline() {
  return (
    <div style={{ width: "100%", maxWidth: 420 }}>
      <EditableText
        multiline
        minLines={3}
        maxLines={8}
        placeholder="Describe this dataset"
        defaultValue="Daily snapshot of orders from the sales warehouse. One row per order line, refreshed at 02:00 UTC."
      />
    </div>
  );
}

Intent#

intent colors the text and its outline. Use it to show validation state.

orders daily

Use lowercase letters, digits and underscores

core/editable-text/intent.tsx

import { Classes, EditableText, H5 } from "@clawscale/react";
import { useState } from "react";

const TABLE_NAME = /^[a-z][a-z0-9_]*$/;

export default function EditableTextIntent() {
  const [name, setName] = useState("orders daily");
  const valid = TABLE_NAME.test(name);
  return (
    <div>
      <H5>
        <EditableText intent={valid ? "success" : "danger"} value={name} onChange={setName} />
      </H5>
      <div className={Classes.TEXT_MUTED}>
        {valid ? "Valid table name" : "Use lowercase letters, digits and underscores"}
      </div>
    </div>
  );
}

Select all on focus#

selectAllOnFocus selects the whole value on focus, ready to replace. It suits renames.

ingest-orders-nightly

core/editable-text/select-all.tsx

import { EditableText, H5 } from "@clawscale/react";

export default function EditableTextSelectAll() {
  return (
    <H5>
      <EditableText selectAllOnFocus defaultValue="ingest-orders-nightly" />
    </H5>
  );
}

Interactive playground#

Revenue by region

Net revenue per region, updated hourly from orders_daily.

Props

DisabledSelect all on focusConfirm on Enter (multiline)

Intent

Max length

View source on GitHub

Props interface#

interface EditableTextProps extends IntentProps, Props@clawscale/react

Props	Description
`alwaysRenderInput`	`boolean` = `false` EXPERIMENTAL FEATURE.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`confirmOnEnterKey`	`boolean` = `false` If `true` and in multiline mode, the `enter` key will trigger onConfirm and `mod+enter` will insert a newline. If `false`, the key bindings are inverted such that `enter` adds a newline.
`contentId`	`string` ID attribute to pass to the underlying element that contains the text contents. This allows for referencing via aria attributes
`customInputAttributes`	`HTMLInputProps & HTMLTextAreaProps` Custom attributes that will be passed to the underlying input (or textarea) element. This allows you to specify additional attributes like `aria-` attributes, `data-` attributes, etc.
`defaultValue`	`string` Default text value of uncontrolled input.
`disabled`	`boolean` = `false` Whether the text can be edited.
`elementRef`	`React.Ref<HTMLDivElement>` Ref to attach to the root element rendered by this component.
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`isEditing`	`boolean` Whether the component is currently being edited.
`maxLength`	`number` Maximum number of characters allowed. Unlimited by default.
`maxLines`	`number` Maximum number of lines before scrolling begins, when `multiline`.
`minLines`	`number` = `1` Minimum number of lines (essentially minimum height), when `multiline`.
`minWidth`	`number` Minimum width in pixels of the input, when not `multiline`.
`multiline`	`boolean` = `false` Whether the component supports multiple lines of text. This prop should not be changed during the component's lifetime.
`onCancel`	`(value: string): void` Callback invoked when user cancels input with the `esc` key. Receives last confirmed value.
`onChange`	`(value: string): void` Callback invoked when user changes input in any way.
`onConfirm`	`(value: string): void` Callback invoked when user confirms value with `enter` key or by blurring input.
`onEdit`	`(value: string \| undefined): void` Callback invoked after the user enters edit mode.
`placeholder`	`string` = `"Click to Edit"` Placeholder text when there is no value.
`selectAllOnFocus`	`boolean` = `false` Whether the entire text field should be selected on focus. If `false`, the cursor is placed at the end of the text. This prop is ignored on inputs with type other then text, search, url, tel and password. See https://html.spec.whatwg.org/multipage/input.html#do-not-apply for details.
`type`	`string` The type of input that should be shown, when not `multiline`.
`value`	`string` Text value of controlled input.