Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Editable

Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

ソース@yamada-ui/editable

インポート

import {
  Editable,
  EditableInput,
  EditablePreview,
  EditableTextarea,
} from "@yamada-ui/react"
Copied!
  • Editable: 子要素(EditableInput, EditableTextarea, EditablePreview)を制御するラッパーコンポーネントです。
  • EditablePreview: テキスト入力の値を表示するコンポーネントです。
  • EditableInput: テキスト入力を取得するコンポーネントです。EditablePreviewがクリックまたはフォーカスすると表示されます。
  • EditableTextarea: 複数行のテキスト入力を取得するコンポーネントです。EditablePreviewがクリックまたはフォーカスすると表示されます。

使い方

編集可能な例

<Editable defaultValue="オッス！オラ悟空！">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

複数行の場合は、EditableTextareaを使用します。

編集可能な例

<Editable
  defaultValue={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`}
>
  <EditablePreview />
  <EditableTextarea h="2lh" />
</Editable>
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<Editable focusBorderColor="green.500" defaultValue="custom border color">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<Editable isDisabled defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<Editable isReadOnly defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

<Editable isInvalid defaultValue="your email address">
  <EditablePreview />
  <EditableInput />
</Editable>
Copied!

制御する

編集可能な例

const CustomControls = () => {
  const { isEditing, getSubmitProps, getCancelProps, getEditProps } =
    useEditableControl()

  return isEditing ? (
    <ButtonGroup size="sm" gap="sm">
      <IconButton icon={<Check />} {...getSubmitProps()} />
      <IconButton icon={<X />} {...getCancelProps()} />
    </ButtonGroup>
  ) : (
    <ButtonGroup size="sm" gap="sm">
      <IconButton icon={<Pen />} {...getEditProps()} />
    </ButtonGroup>
  )
}

return (
  <Editable
    display="flex"
    gap="sm"
    isPreviewFocusable={false}
    defaultValue="オッス！オラ悟空！"
  >
    <EditablePreview w="full" />
    <EditableInput />
    <CustomControls />
  </Editable>
)
Copied!

React Hook Formを使う

編集可能な例

type Data = { input: string; textarea: string }

const defaultValues: Data = {
  input: "",
  textarea: "",
}

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>({ defaultValues })

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.input}
      label="Name"
      errorMessage={errors.input ? errors.input.message : undefined}
    >
      <Controller
        name="input"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <Editable placeholder="孫悟空" {...field}>
            <EditablePreview />
            <EditableInput />
          </Editable>
        )}
      />
    </FormControl>

    <FormControl
      isInvalid={!!errors.textarea}
      label="Feedback"
      errorMessage={errors.textarea ? errors.textarea.message : undefined}
    >
      <Controller
        name="textarea"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <Editable
            placeholder={`私の戦闘力は530000です。\nですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……`}
            {...field}
          >
            <EditablePreview />
            <EditableTextarea h="2lh" />
          </Editable>
        )}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

GitHubでこのページを編集する

前SaturationSlider次Rating