mui-editable-label is a easy and small component Label that you can edit just by clicking.
npm i mui-editable-label
function Demo() {
const [text, setText] = useState("Click here to edit.");
return (
<div>
<h1>mui-editable-label Demo</h1>
<MuiEditableLabel
initialValue={text}
onFocus={value => console.log("on focus: ", value)}
onBlur={value => {
console.log('on blur: ', value);
setText(value);
}}
/>
</div>
);
}
see a example here
| Events | Description | return |
|---|---|---|
| onFocus | trigged when user clicks | a string input value |
| onBlur | trigged when user get out focus from component or press enter key | a string input value |
| Props | Description |
|---|---|
| initialValue | initial string value |