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...