react-bootstrap-xeditable-loom
v0.2.22
Published
X-Editable for React with Bootstrap. Inspried by [kunyan/react-bootstrap-xeditable](https://github.com/kunyan/react-bootstrap-xeditable)
Downloads
19
Readme
react-bootstrap-xeditable-loom
X-Editable for React with Bootstrap.
Inspried by kunyan/react-bootstrap-xeditable
Updates to this Readme will follow after ... everything is mostly done.
Install
# npm
npm install react-bootstrap-xeditable
# yarn
yarn add react-bootstrap-xeditable
import bootstrap css and xeditable css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
Usage:
TextField
import {EditableTextField} from 'react-bootstrap-xeditable';
<EditableTextField name='username' value={this.state.value} onUpdate={this.handleUpdate} placeholder='Please input your username'/>
Select
const options = [
{
text: 'China',
value: 'CN'
}, {
text: 'India',
value: 'IN'
}, {
text: 'United Kingdom (UK)',
value: 'UK'
}, {
text: 'United States of America (USA)',
value: 'USA'
}
];
import {EditableSelect} from 'react-bootstrap-xeditable';
<EditableSelect name='country' onUpdate={this.handleUpdate} value={this.state.value} options={options}/>
Progress:
- :white_check_mark: : Supported
- :runner: : In Progress
- :thought_balloon: : Planning
| Element | Support | ReactXElement | | ------| ------ | ------ | | textfield| :white_check_mark: | EditableTextField | | select| :white_check_mark: | EditableSelect | | textarea| :white_check_mark: | EditableTextArea | | date| :thought_balloon: | | | datetime| :thought_balloon: | | | select2| :thought_balloon: | |
TypeScript:
No. See kunyan/react-bootstrap-xeditable for a Typescript integrated version.
Known Issues:
- Only support inline mode
- onBlur not support yet
License
Licensed under the GPL-3.0 license. Copyright (C) 2016 Kun Yan