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 |