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}
  onUpdate={this.handleUpdate}  # Required
  onBlur={this.handleBlur}
  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}  # Required
  onBlur={this.handleBlur}
  value={this.state.value}
  options={options}
/>

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

License

Licensed under the GPL-3.0 license. Copyright (C) 2016 Kun Yan