# react-lite-textbox

> Textbox component for Talk by Teambition

Latest version **1.2.1** (published 2016-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-lite-textbox
pnpm add react-lite-textbox
yarn add react-lite-textbox
bun add react-lite-textbox
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2016-02-01 |
| First published | 2015-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Teambition |
| Maintainers | boshen, jiyinyiyong |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/react-lite-textbox
- Repository: https://github.com/teambition/coffee-lite-textbox
- Issues: https://github.com/teambition/coffee-lite-textbox/issues
- npm.io page: https://npm.io/package/react-lite-textbox

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^0.14.7
- [keycode](https://npm.io/package/keycode.md) ^2.1.0
- [tail-call](https://npm.io/package/tail-call.md) 0.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.3
- [react-addons-pure-render-mixin](https://npm.io/package/react-addons-pure-render-mixin.md) ^0.14.7

## Recent versions

- 1.2.1 (latest) — 2016-02-01
- 1.2.0 — 2016-01-29
- 1.1.7 — 2016-01-18
- 1.1.6 — 2015-12-10
- 1.1.5 — 2015-12-03
- 1.1.4 — 2015-12-02
- 1.1.3 — 2015-12-01
- 1.1.2 — 2015-10-20
- 1.1.1 — 2015-10-10
- 1.1.0 — 2015-10-10
- 0.0.11 — 2015-10-09
- 0.0.10 — 2015-09-25
- 0.0.9 — 2015-09-25
- 0.0.8 — 2015-09-11
- 0.0.7 — 2015-09-09
- … 6 more at https://npm.io/package/react-lite-textbox/versions

## README

Textbox component for Talk by Teambition
----

Demo http://ui.talk.ai/react-lite-textbox/

Features:

* realtime caret pixel position detection with Canvas API
* special characters(i.e. `@`, `:`) pixel position detection with Canvas API
* complete text based on special characters such as `@`

Caveats:

* Canvas API is not very accurate dealing with line breaks
* Need to specify paddings as props in order to compute position
* May cause CPU time find positions very frequently

### Usage

```bash
npm i --save react-lite-textbox
```

```coffee
Textbox
  text: @state.text, onChange: @onChange, specials: ['@', ':']
  placeholder: 'Write here...'
  selectionStart: @state.start
  selectionEnd: @state.end
  onKeyDown: @onKeyDown
  paddingTop: 10
  paddingBottom: 10
  paddingLeft: 10
  paddingRight: 10
  lineHeight: 28
```

Read `src/main.coffee` for details.

### API to detect caret position in pixels

In order to detect precise pixel position of caret, this project utilized [`measureText` API][api] to do manual layout based on Canvas APIs. The results is an object of pixels.

[api]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText

```coffee
measure = require 'react-lite-textbox/lib/measure'
measure.textPosition(text, cursor, style, limitWidth)
# => {top: 40, bottom: 50, left: 10, right: 10}
```


* `text` not only the text before the caret, also about one line of text more to help with layouts.
* `cursor` the position where the caret is, an integer.
* `style` property is consisted of `{fontSize: 14, lineHeight: 20, fontFamily: 'Optima'}` which Canvas may need in measuring.
* `limitWidth` width of container, an integer.

Notice the manual layout algorithm has two flaws dealing with punctuations in CJK languages and words that overflows the container. In simple cases the result can be as precise as `Element.getBoundingClientRect` which gets position with a selection object.

Send me PR if you got ideas to improve the results.

### Develop

https://github.com/teambition/coffee-webpack-starter

### License

MIT

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