Skip to content

InlineEdit

Basic usage

Use <InlineEdit /> to make plain text wrapped in InlineInput editable.

Author:
tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import EditM from '@semcore/icon/Edit/m';
import { Text } from '@semcore/typography';

const Example = () => {
  const [text, setText] = React.useState('Martin Eden');
  const [confirmedText, setConfirmedText] = React.useState(text);
  const [editable, setEditable] = React.useState(false);

  return (
    <div>
      <Text mr={2}>Author:</Text>
      <InlineEdit editable={editable} onEditableChange={setEditable}>
        <InlineEdit.View style={{ display: 'flex', gap: 8, alignItems: 'center' }} pr={2}>
          {text} <EditM color='icon-secondary-neutral' />
        </InlineEdit.View>
        <InlineEdit.Edit>
          <InlineInput
            onConfirm={() => {
              setEditable(false);
              setConfirmedText(text);
            }}
            onCancel={() => {
              setText(confirmedText);
              setEditable(false);
            }}
            onBlurBehavior={'confirm'}
          >
            <InlineInput.Value autoFocus value={text} onChange={setText} aria-label='Author name' />
            <InlineInput.ConfirmControl />
            <InlineInput.CancelControl />
          </InlineInput>
        </InlineEdit.Edit>
      </InlineEdit>
    </div>
  );
};

const Demo = Example;

export default Demo;

Editable tag

As far as <InlineEdit /> is flexible, it could be used with almost any children elements (out of example both in <InlineEdit.View /> and <InlineEdit.Edit />).

tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import Tag from '@semcore/tag';

const Demo = () => {
  const [value, setValue] = React.useState('Default tag');
  const [editable, setEditable] = React.useState(false);

  const handleValue = (value: string) => {
    setEditable(false);
    setValue(value);
  };
  const resetEditable = () => setEditable(false);

  return (
    <>
      <InlineEdit editable={editable} onEditableChange={setEditable}>
        <InlineEdit.View pr={2} tag={Tag} interactive size='l' role={''}>
          <Tag.Text>{value}</Tag.Text>
          <Tag.Close onClick={(e) => e.stopPropagation()} />
        </InlineEdit.View>
        <InlineEdit.Edit>
          <InlineInput onConfirm={handleValue} onCancel={resetEditable}>
            <InlineInput.Value defaultValue={value} autoFocus aria-label='editable tag' />
            <InlineInput.ConfirmControl />
            <InlineInput.CancelControl />
          </InlineInput>
        </InlineEdit.Edit>
      </InlineEdit>
    </>
  );
};

export default Demo;

Pseudo network interaction

In this example, the value entered in the input is stored on the backend.

tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import EditM from '@semcore/icon/Edit/m';
import { Text } from '@semcore/typography';

const Example = () => {
  const [title, setTitle] = React.useState('The Adventures of Intergalactic Whale');
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [savingTitle, setSavingTitle] = React.useState(false);
  const stopEditing = () => setEditingTitle(false);
  const handleTitle = (title: string) => {
    setSavingTitle(true);
    /** Here we are doing some network activities */
    setTimeout(() => {
      setTitle(title);
      setSavingTitle(false);
      setEditingTitle(false);
    }, 3000);
  };

  return (
    <>
      <Text tag='h3' mb={2}>
        <InlineEdit editable={editingTitle} onEditableChange={setEditingTitle}>
          <InlineEdit.View pr={5}>
            {title} <EditM ml={1} />
          </InlineEdit.View>
          <InlineEdit.Edit>
            <InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
              <InlineInput.Value autoFocus defaultValue={title} aria-label='Article title' />
              <InlineInput.ConfirmControl />
              <InlineInput.CancelControl />
            </InlineInput>
          </InlineEdit.Edit>
        </InlineEdit>
      </Text>
      <Text size={300} mt={3}>
        Once upon a time in a distant galaxy far, far away, there existed a legendary creature known
        as the Intergalactic Whale. This magnificent space-faring mammal was no ordinary whale. It
        had the power to swim through the cosmic ocean, jumping from one star system to another with
        grace and finesse.
      </Text>
    </>
  );
};

const Demo = Example;

export default Demo;

Last updated:

Released under the MIT License.

Released under the MIT License.