Inline edit

Playground

'use client';
import { useEffect, useRef, useState } from 'react';
import {
  InlineEdit,
  type InlineEditSize,
  type InlineEditLine,
  type InlineEditVariant,
} from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "invalid": false,
    "title": "title",
    "variant": "default",
    "size": "md",
    "line": "single",
    "disabled": false
  };
  const [value, setValue] = useState(settings.title);
  const previousSetting = useRef(settings.title);
  useEffect(() => {
    if (previousSetting.current === settings.title) return;
    previousSetting.current = settings.title;
    setValue(settings.title);
  }, [settings.title]);
  return (
    <div style={{ width: 320, maxWidth: '100%' }}>
      <InlineEdit
        value={value}
        onCommit={(next) => {
          setValue(next);
        }}
        invalid={settings.invalid}
        defaultEditing
        editLabel={"Edit title"}
        cancelLabel={"Cancel editing"}
        clearLabel={"Clear title"}
        size={settings.size as InlineEditSize}
        variant={settings.variant as InlineEditVariant}
        line={settings.line as InlineEditLine}
        disabled={settings.disabled}
      />
    </div>
  );
}

Properties

Size

Variant

Line

Error

Disabled

Content

Text

Usage

onValueChange reports edits, and onCommit reports the committed value. To let Escape restore the previous value, keep the committed value in value and update it in onCommit. Moving focus outside the editor also commits the edit.

'use client';
import { useState } from 'react';
import { InlineEdit } from '@mbsw/ui';

export default function Example() {
  const [title, setTitle] = useState('title');
  return (
    <InlineEdit
      value={title}
      onCommit={setTitle}
      editLabel={"Edit title"}
      cancelLabel={"Cancel editing"}
      clearLabel={"Clear title"}
    />
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

InlineEdit