react-composition-input

An input component optimized for languages which need composition such as Chinese, Japanese etc.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-composition-input
1.1.15 years ago6 years agoMinified + gzip package size for react-composition-input in KB

Readme

react-composition-input
The input component optimized for languages like Chinese, Japanese etc.
npm version
Demo
中文文档
Usage
npm install --save react-composition-input
import CInput from 'react-composition-input';

class App extends Component {
  render() {
    return (
      <CInput onInputChange={this.handleInputChange} />
    );
  }
}
Example & Development
npm install
npm start
Why
When we type non-latin languages, e.g. Chinese, we need IME to compose our input until a word selection has been made. However, when we are changing the input field's value during a composition, the onChange event emits before the composition is finished. Which is not what we expect. And frequently calling onChange function may affect page performance.
According to DOM3 spec, composition events can help us avoid emitting onChange event before the composition event is finished. We can use a variable to tag the status of a composition. By using react-composition-input, the onInputChange callback will only be called after compositionend event is emitted.
You can see the difference through the gif below.
original_inputoptimized_input
You can read this article by Evan You to know more about DOM composition event.
Update
I find that some IME also behaves differently on composition event. If you use Apple native keyboard on iOS, the onInput event is emitted before the composition event. If you use Google keyboard instead, the composition event will never be emitted. The onInput event will only be emitted when the composition is over(which is a good thing but not a standard thing).
So I change the way to detect the sequence of event firing. To make it more compatible for most situations.
After 1.1.0, you can set value as props to control the value in CInput. Thanks for the PR from luyilin.
Q & A

Why to detect Chrome and call onInputChange after compositionend event?

After Chrome v53, the compositionend event is emitted after textInput event. It causes that compositionend event emitted but onInputChange function is not be called. So we need to call onInputChange for another time.
You can see the source code of chromium for more details.

Why to use Parcel as the bundler?

I use Parcel to develop because parcel is really simple and convenient to build a demo page for component. Don't worry if you use webpack or other bundlers because the production code is produced through Babel.