react-bootstrap-xeditable

X-Editable for React with Bootstrap. Demo


Install

``bash


npm

npm install react-bootstrap-xeditable

yarn

yarn add react-bootstrap-xeditable
`

import bootstrap css and xeditable css
`


`

Usage:

$3


`html
import {EditableTextField} from 'react-bootstrap-xeditable';


`
#### Options
| Option | Type | Required | Description |
| ------| ------ | ------ |------ |
| isEditing| boolean | optional | Set editing status |
| isEditable| boolean | optional | You can make it readonly |
| linkClassName| string | optional | Defined the css class for the link text |
| nonValueText| string | optional | the default text if no value |
| value| string | required | The value of input text |
| onSave| function | required | the callback when click save button |
| onCancel| function | optional | the callback when click cancel button |
| placeholder | string | optional| |




$3


`javascript
const options = [
{
text: 'China',
value: 'CN'
}, {
text: 'India',
value: 'IN'
}, {
text: 'United Kingdom (UK)',
value: 'UK'
}, {
text: 'United States of America (USA)',
value: 'USA'
}
];
`
`html
import {EditableSelect} from 'react-bootstrap-xeditable';


`

#### Options
| Option | Type | Required | Description |
| ------| ------ | ------ |------ |
| isEditing| boolean | optional | Set editing status |
| isEditable| boolean | optional | You can make it readonly |
| linkClassName| string | optional | Defined the css class for the link text |
| nonValueText| string | optional | the default text if no value |
| value| string | string[] | required | The value of input text |
| multiple| boolean | optional | If the select support multiple |
| options| IOption[] | string[] | required | The options |
| onSave| function | required | the callback when click save button |
| onCancel| function | optional | the callback when click cancel button |




$3


`html
import {EditableTextArea} from 'react-bootstrap-xeditable';


``

#### Options
| Option | Type | Required | Description |
| ------| ------ | ------ |------ |
| isEditing| boolean | optional | Set editing status |
| isEditable| boolean | optional | You can make it readonly |
| linkClassName| string | optional | Defined the css class for the link text |
| nonValueText| string | optional | the default text if no value |
| value| string | required | The value of input text |
| onSave| function | required | the callback when click save button |
| onCancel| function | optional | the callback when click cancel button |

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:

d.ts already intergrated. just import it.

Known Issues:

1. Only support inline mode
2. onBlur not support yet

License

Licensed under the MIT license.
Copyright (C) 2018 Kun Yan