Basic usage

User name:

import React from 'react';
import InlineInput from '@semcore/ui/inline-input';

const Example = () => {
  return (
    <InlineInput
      w={300}
      onBlurBehavior='cancel'
      onCancel={console.log}
      onChange={console.log}
      onConfirm={console.log}
    >
      <InlineInput.Addon htmlFor='basic-example' tag='label'>
        User name:
      </InlineInput.Addon>
      <InlineInput.Value id='basic-example' defaultValue='John Doe' />
      <InlineInput.ConfirmControl />
      <InlineInput.CancelControl />
    </InlineInput>
  );
};

const Demo = Example;

export default Demo;

Inheriting text size

Component vertical size is based on inherited text size. Horizontal size should be explicitly set, otherwise component takes the whole width.

The Adventures of Intergalactic Whale

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.

import React from 'react';
import InlineInput from '@semcore/ui/inline-input';
import InlineEdit from '@semcore/ui/inline-edit';
import EditM from '@semcore/ui/icon/Edit/m';
import { Text } from '@semcore/ui/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) => {
    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 color='icon-secondary-neutral' />
          </InlineEdit.View>
          <InlineEdit.Edit>
            <InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
              <InlineInput.Value autoFocus defaultValue={title} aria-label='Article name' />
              <InlineInput.ConfirmControl />
              <InlineInput.CancelControl />
            </InlineInput>
          </InlineEdit.Edit>
        </InlineEdit>
      </Text>
      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.
    </>
  );
};

const Demo = Example;

export default Demo;

Number-only input

Number:

import React from 'react';
import InlineInput from '@semcore/ui/inline-input';

const Example = () => {
  return (
    <div>
      <InlineInput w={200}>
        <InlineInput.Addon htmlFor='number-example' tag='label'>
          Number:
        </InlineInput.Addon>
        <InlineInput.NumberValue id='number-example' defaultValue={100} />
        <InlineInput.NumberControls />
        <InlineInput.ConfirmControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;