editable-input-react

editable-label-react 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>editable-input-react Demo</h1>
      <EditableLabel
        labelClassName="myLabelClass"
        inputClassName="myInputClass"
        inputWidth="200px"
        inputHeight="25px"
        inputMaxLength="50"
        labelFontWeight="bold"
        inputFontWeight="bold"
        value={text}
        onChange={e => setText(e.target.value)}
        onFocus={t => console.log("focus", t)}
        onFocusOut={t => console.log("focus out", t)}
      />
    </div>
  )
}

see a example here

component api

Events	Description	return
onChange	a normal event of a input	event object
onFocus	trigged when user clicks	a string input value
onFocusOut	trigged when user get out focus from component or press enter key	a string input value

Props	Description
labelClassName	className for label
labelFontSize	size of label font
labelFontWeight	weight of label font
labelPlaceHolder	placeholder of label
inputClassName	className for input
inputMaxLength	max length of input
inputPlaceHolder	placeholder of input
inputTabIndex	tabIndex of input
inputWidth	width of input
inputHeight	height of input
inputFontSize	font size of input
inputFontWeight	font weigth of input
inputBorderWidth	border width of input

other props is loading in the next verions...