react-bootstrap-xeditable

X-Editable for React with Bootstrap. Demo

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} onSave={this.onSave} placeholder='Please input your username'/>

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

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' onSave={this.onSave} value={this.state.value} options={options}/>

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
multiple	boolean	optional	If the select support multiple
options	IOption[]	string[]	required
onSave	function	required	the callback when click save button
onCancel	function	optional	the callback when click cancel button

TextArea

import {EditableTextArea} from 'react-bootstrap-xeditable';
 
<EditableTextArea name='username' value={this.state.value} onSave={this.onSave} placeholder='Please input your username'/>

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:

• ✅ : Supported
• 🏃 : In Progress
• 💭 : Planning

Element	Support	ReactXElement
textfield	✅	EditableTextField
select	✅	EditableSelect
textarea	✅	EditableTextArea
date	💭
datetime	💭
select2	💭

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