Atlaskit editable
This example features a tweaked UI, a hover color with dark mode support, and a tooltip. As you can see, we can change the input by setting the as
prop. This design is inspired by the Atlassian inline edit component. Read more about the editable here.
Here are the imports required:
import { EditablePreview, Box, useColorModeValue, IconButton, Input, useDisclosure, useEditableControls, ButtonGroup, SlideFade, Editable, Tooltip, EditableInput } from "@chakra-ui/react";import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
function App() {/* Here's a custom control */function EditableControls() {const {isEditing,getSubmitButtonProps,getCancelButtonProps,getEditButtonProps} = useEditableControls();return isEditing ? (<ButtonGroup justifyContent="end" size="sm" w="full" spacing={2} mt={2}><IconButton icon={<CheckIcon />} {...getSubmitButtonProps()} /><IconButtonicon={<CloseIcon boxSize={3} />}{...getCancelButtonProps()}/></ButtonGroup>) : null;}return (<EditabledefaultValue="Rasengan ⚡️"isPreviewFocusable={true}selectAllOnFocus={false}><Tooltip label="Click to edit" shouldWrapChildren={true}><EditablePreviewpy={2}px={4}_hover={{background: useColorModeValue("gray.100", "gray.700")}}/></Tooltip><Input py={2} px={4} as={EditableInput} /><EditableControls /></Editable>);}