A beautiful inline editing input field component
In this NPM package with you can easily edit your input field with lebel. Users can easily click on lebels and edit text inline.
Installation
npm install --save inline-edit-input-value
Component props
* Required
| Prop | Type | Description |
|---|---|---|
| text | Text to be displayed on both the label and initially in the editor | |
| isEditing | bool | Flags whether the label should be in editor mode |
| labelClassName | string | Class name for the text styling |
| labelFontSize | string | Font size for the text |
| labelFontWeight | string | Font weight for the text |
| inputMaxLength | number | Max length for the input in editing mode |
| inputPlaceHolder | string | Placeholder for the input in editing mode |
| inputWidth | string | Width of the input in editing mode |
| inputHeight | string | Height of the input in editing mode |
| inputFontSize | string | Font size for the input in editing mode |
| inputFontWeight | string | Font weight for the input in editing mode |
| inputClassName | string | Class name for the input editor's styling |
| inputBorderWidth | string | Border width for the input in editing mode |
| onFocus | function | Callback for text focusing. Parameter(s): text
|
| onFocusOut | function | Callback for focus leaving editor. Parameter(s): text
|
#Example
import React from 'react';
import InlineEditInput from './InlineEditInput'
class App extends React.Component {
handleFocus = (text) => {
console.log('Focused with value: ' + text.value);
console.log('Focused with name: ' + text.name);
}
handleFocusOut = (text) => {
console.log('Left editor with value: ' + text.value);
console.log('Left editor with name: ' + text.name);
}
render() {
return (
<div className="App">
<InlineEditInput
text='Ranjeet Kumar!'
name='full-name'
labelClassName='myLabelClass'
inputClassName='myInputClass'
inputWidth='200px'
inputHeight='25px'
inputMaxLength='50'
labelFontWeight='bold'
inputFontWeight='bold'
onFocus={this.handleFocus}
onFocusOut={this.handleFocusOut}
/>
</div>
);
}
}
export default App;