Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@chakra-ui/editable

chakra-ui1.9mMIT3.1.0TypeScript support: included

React component used to build inline-editable components

chakra ui, react, inline, editable, inline editable, ui, editable text, text field, component

readme

@chakra-ui/editable

EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.

Installation

yarn add @chakra-ui/editable

# or

npm i @chakra-ui/editable

Import component

import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"

Usage

<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>