react-bootstrap-xeditable-loom

0.2.22 • Public • Published

react-bootstrap-xeditable-loom

X-Editable for React with Bootstrap.
Inspried by kunyan/react-bootstrap-xeditable

Updates to this Readme will follow after ... everything is mostly done.

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

Progress:

  • ✅ : Supported
  • 🏃 : In Progress
  • 💭 : Planning
Element Support ReactXElement
textfield EditableTextField
select EditableSelect
textarea EditableTextArea
date 💭  
datetime 💭  
select2 💭  

TypeScript:

No. See kunyan/react-bootstrap-xeditable for a Typescript integrated version.

Known Issues:

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

License

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-bootstrap-xeditable-loom

Weekly Downloads

1

Version

0.2.22

License

GPL-3.0

Last publish

Collaborators

  • hellofantastic