EditableText

Source code
Lorem ipsum dolor...
import { EditableText } from "rfui-package";

#Basic

Lorem ipsum dolor...
<EditableText
  text={basicExampleText}
  onChange={(newText) => {
    setBasicExampleText(newText);
  }}
/>

#Textarea

Lorem ipsum dolor...
<EditableText
  text={textareaExampleText}
  onChange={(newText) => {
    setTextareaExampleText(newText);
  }}
/>

#Empty state with placeholder

Empty state text
<EditableText
  emptyStateText="Empty state text"
  text={emptyStateExampleText}
  onChange={(newText) => {
    if (newText.length > 0) {
      setEmptyStateExampleText(newText);
    }
  }}
  inputProps={{ placeholder: "Placeholder text..." }}
/>

#...rest

Whatever you pass to ...rest will get passed to Text, Input, and Textarea. If instead you want to pass props to only one of those three components, you can use textProps, inputProps, or textareaProps.
Lorem ipsum dolor...
<EditableText
  text={restExampleText}
  onChange={(newText) => {
    setRestExampleText(newText);
  }}
  className="text-supporting-green-500"
/>

#Props

PropRequiredDefaultType and notes
text-
string
onChange-
(newText: string) => void
type-"input"
"input" | "textarea"
emptyStateText--
string
textProps--
Omit<TextType, "onClick">
Gets passed to Text.
inputProps--
Omit<
  InputType,
  "onClick" | "type" | "value" | "onChange" | "onBlur"
>
Gets passed to Input.
textareaProps--
Omit<
  InputType,
  "onClick" | "type" | "value" | "onChange" | "onBlur"
>
Gets passed to Textarea.
...rest--
See TypeScript type
Whatever you pass to ...rest will get passed to Text, Input, and Textarea. If instead you want to pass props to only one of those three components, you can use textProps, inputProps, or textareaProps.