❤
npm
Sign UpSign In

react-bootstrap-xeditable
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-bootstrap-xeditable

X-Editable for React with Bootstrap. Demo

Build Status npm version devDependencies Status

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-bootstrap-xeditable

Repository

github.com/kunyan/react-bootstrap-xeditable

Homepage

github.com/kunyan/react-bootstrap-xeditable#readme

Weekly Downloads

36

Version

1.0.0

License

MIT

Unpacked Size

112 kB

Total Files

16

Last publish

Collaborators

  • engineersamuel
  • kunyan
Try on RunKit
Report malware