mui-editable-label

mui-editable-label is a easy and small component Label that you can edit just by clicking.

how to use:

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

component api

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