Skip to content
This repository has been archived by the owner on Apr 19, 2024. It is now read-only.

kunyan/react-bootstrap-xeditable

Repository files navigation

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