EditableH1

Source code

Lorem ipsum dolor...

import { EditableH1 } from "rfui-package";

#Basic

Lorem ipsum dolor...

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

#Empty state with placeholder

Empty state text

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

Lorem ipsum dolor...

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

#Props

PropRequiredDefaultType and notes
text-
string
onChange-
(newText: string) => void
emptyStateText--
string
h1Props--
Omit<H1Type, "onClick">
Gets passed to H1.
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 H1 andInput. If instead you want to pass props to only one of those two components, you can use h1 orinputProps.