EditableH2

Source code

Lorem ipsum dolor...

import { EditableH2 } from "rfui-package";

#Basic

Lorem ipsum dolor...

<EditableH2
  text={basicExampleText}
  onChange={(newText) => {
    setBasicExampleText(newText);
  }}
/>

#Empty state with placeholder

Empty state text

<EditableH2
  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 H2 andInput. If instead you want to pass props to only one of those two components, you can use h2 orinputProps.

Lorem ipsum dolor...

<EditableH2
  text={restExampleText}
  onChange={(newText) => {
    setRestExampleText(newText);
  }}
  className="text-supporting-green-500"
/>

#Props

PropRequiredDefaultType and notes
text-
string
onChange-
(newText: string) => void
emptyStateText--
string
h2Props--
Omit<H2Type, "onClick">
Gets passed to H2.
inputProps--
Omit<
  InputType,
  "onClick" | "type" | "value" | "onChange" | "onBlur"
>
Gets passed to Input.
...rest--
See TypeScript type
Whatever you pass to ...rest will get passed to H2 andInput. If instead you want to pass props to only one of those two components, you can use h2 orinputProps.