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