# react-bootstrap-xeditable-loom

> X-Editable for React with Bootstrap. Inspried by [kunyan/react-bootstrap-xeditable](https://github.com/kunyan/react-bootstrap-xeditable)

Latest version **0.2.22** (published 2017-07-05) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install react-bootstrap-xeditable-loom
pnpm add react-bootstrap-xeditable-loom
yarn add react-bootstrap-xeditable-loom
bun add react-bootstrap-xeditable-loom
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.22 |
| Published | 2017-07-05 |
| First published | 2017-06-07 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dallas |
| Maintainers | hellofantastic |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap-xeditable-loom
- Repository: https://github.com/hellofantastic/react-bootstrap-xeditable-loom
- Homepage: https://github.com/hellofantastic/react-bootstrap-xeditable-loom#readme
- Issues: https://github.com/hellofantastic/react-bootstrap-xeditable-loom/issues
- npm.io page: https://npm.io/package/react-bootstrap-xeditable-loom

## Dependencies (12)

- [enzyme](https://npm.io/package/enzyme.md) ^2.9.1
- [cross-env](https://npm.io/package/cross-env.md) ^5.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [babel-core](https://npm.io/package/babel-core.md) ^6.25.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.1
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^1.8.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.5.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.1.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.29.0
- [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.1.1
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ^15.6.0
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^2.1.2

## Recent versions

- 0.2.22 (latest) — 2017-07-05
- 0.2.21 — 2017-07-01
- 0.2.20 — 2017-07-01
- 0.2.19 — 2017-07-01
- 0.2.18 — 2017-06-30
- 0.2.17 — 2017-06-29
- 0.2.16 — 2017-06-22
- 0.2.15 — 2017-06-22
- 0.2.14 — 2017-06-21
- 0.2.13 — 2017-06-09
- 0.2.12 — 2017-06-08
- 0.2.11 — 2017-06-07
- 0.2.10 — 2017-06-07

## README

# react-bootstrap-xeditable-loom

X-Editable for React with Bootstrap.  
Inspried by [kunyan/react-bootstrap-xeditable](https://github.com/kunyan/react-bootstrap-xeditable)

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

[![Build Status](https://travis-ci.org/kunyan/react-bootstrap-xeditable.svg?branch=master)](https://travis-ci.org/kunyan/react-bootstrap-xeditable)
[![npm version](https://badge.fury.io/js/react-bootstrap-xeditable.svg)](https://badge.fury.io/js/react-bootstrap-xeditable)
[![devDependencies Status](https://david-dm.org/kunyan/react-bootstrap-xeditable/dev-status.svg)](https://david-dm.org/kunyan/react-bootstrap-xeditable?type=dev)

## Install

```bash
# 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
```html
import {EditableTextField} from 'react-bootstrap-xeditable';

<EditableTextField name='username' value={this.state.value} onUpdate={this.handleUpdate} placeholder='Please input your username'/>
```

### Select
```javascript
const options = [
  {
    text: 'China',
    value: 'CN'
  }, {
    text: 'India',
    value: 'IN'
  }, {
    text: 'United Kingdom (UK)',
    value: 'UK'
  }, {
    text: 'United States of America (USA)',
    value: 'USA'
  }
];
```
```html
import {EditableSelect} from 'react-bootstrap-xeditable';

<EditableSelect name='country' onUpdate={this.handleUpdate} value={this.state.value} options={options}/>
```

## Progress:
* :white_check_mark: : Supported
* :runner: : In Progress
* :thought_balloon: : Planning

| Element | Support | ReactXElement |
| ------| ------ | ------ |
| textfield| :white_check_mark: | EditableTextField |
| select| :white_check_mark: | EditableSelect |
| textarea| :white_check_mark: | EditableTextArea |
| date| :thought_balloon: |  &nbsp; |
| datetime| :thought_balloon: | &nbsp; |
| select2| :thought_balloon: | &nbsp; |

## TypeScript:
No.
See [kunyan/react-bootstrap-xeditable](https://github.com/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

---
_Source: https://npm.io/package/react-bootstrap-xeditable-loom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._