Inline Edit

The RhInlineEdit is a component that enables inline editing of a value with the ability to confirm or cancel changes made by the user.

Usage

Once installed, you can import the RhInlineEdit component into your React application:

copy

import {RhInlineEdit} from "@rhythm-ui/react"

Then, you can use the RhInlineEdit component in your JSX code:

copy

<RhInlineEdit
  placeholder="Click to Edit"
  value="Click to Edit"
  onConfirm={(value) => setInputText(value)}
  className="m-4 p-8"
>
  <RhInput type="text" placeholder="Text" />
</RhInlineEdit>

Inline Edit Props

Name	Type	Default	Description
value	any		Value for component inside inline edit
placeholder	string	Click to Edit	Placeholder when there is no value in inline edit, leave it blank if not want to show
onConfirm	(finalValue: string) => void		Handle change event on InlineEdit
className	string		String value for adding styles to RhInlineEdit
icon	string \| Element		Edit icon to be displayed
children	Element		JSX Element should be either RhInput or RhSelect

Text Area

The RhInlineEdit component wraps the RhInput of type textarea and displays the text initially as plain text. When the user clicks on the text, the component switches to a text area, allowing the user to modify the text. This provides a user-friendly way to edit and update text within the component.

copy

<RhInlineEdit
  placeholder="Click to Edit"
  value="Click to Edit"
  className="m-4 p-8"
  onConfirm={(value) => setInputText(value)}
>
  <RhInput type="textarea" placeholder="Text Area" />
</RhInlineEdit>

Select

The RhInlineEdit component wraps the RhSelect component and displays the selected option initially as plain text. When the user clicks on the text, the component switches to a select menu, allowing the user to choose from the available options.

copy

function selectInline() {
  const [selected, setSelected] = useState("Click to Select");
  return (
    <div className="p-8 pb-28">
      <RhInlineEdit
        placeholder="Click to Select"
        value={selected}
        onConfirm={(value) => setSelected(value)}
        className="pb-16"
      >
        <RhSelect
          options={[
            { value: "blues", label: "Blues" },
            { value: "rock", label: "Rock" },
          ]}
        />
      </RhInlineEdit>
    </div>
  );
}

Multi Select

copy

function selectMultipleInline() {
  const [selected, setSelected] = useState("Click to Select Multiple");
  return (
    <div className="p-8">
      <RhInlineEdit
        placeholder="Click to Select"
        value={selected}
        onConfirm={(value) => setSelected(value)}
        className="pb-16"
      >
        <RhSelect
          isMulti={true}
          options={[
            { value: "blues", label: "Blues" },
            { value: "rock", label: "Rock" },
          ]}
        />
      </RhInlineEdit>
    </div>
  );
}