31 lines
502 B
Markdown
31 lines
502 B
Markdown
|
# @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
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn add @chakra-ui/editable
|
||
|
|
|
||
|
|
# or
|
||
|
|
|
||
|
|
npm i @chakra-ui/editable
|
||
|
|
```
|
||
|
|
|
||
|
|
## Import component
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Editable defaultValue="Take some chakra">
|
||
|
|
<EditablePreview />
|
||
|
|
<EditableInput />
|
||
|
|
</Editable>
|
||
|
|
```
|