inline-edit
v1.1.4
Published
React inline edit component able to check format and parse value
Downloads
62
Readme
#Inline Edit React component Component displays value, but when clicked opens the value in text box for editing. Suports format and value validation. Depends on bootstrap.css
#!javascript
import InlineEdit, {intParser, floatParser, emailParser, genericParser} from "./index";
<InlineEdit value="10.00" valueParser={floatParser} displayModeClassName="btn btn-success"
onChange={(value)=>console.log("new int value is: " + value)}
displayFormat={(value)=>numeral(value).format("0,0.00")}/>
React.render(widget, document.getElementById("container"));
You can click Demo html page here to see example in action.
For sample code take a look at Demo sample. Basically, component has 2 modes 'display' in which values is only displayed (can be also formatted), and edit, when value can be edited in textbox.
It is also possible to style the component in both modes by providing displayModeClassName and editModeClassName