React japanese auto input kana

React japanese auto input kana

Japanese React Kana Input Component.

React Auto Kana

Circle CI

Japanese React Kana Input Component

Demo

Live Demo

Installation

npm install -S react-auto-kana

Usage Example

var React = require("react")
var AutoKana = require("react-auto-kana")

var Example = React.createClass({
  getInitialState(){
    return {
      kana : ""
    }
  },
  onUpdateKana(data){
    this.setState({
      kana : data.kana
    })
    //this.props.onChange(this.state)
  },
  onChange(e){
    this.setState({
      kana : e.target.value
    })
  },
  render(){
    return (
      <div>
        <div>
          <AutoKana onUpdate={this.onUpdateKana} />
          <input name="kana" value={this.state.kana} onChange={this.onChange} />
        </div>
      </div>
    )
  }
})
module.exports = Example

props

  • onUpdate
    • Callback after generated kana
    • data.kana : Generated kana value

If you want get Katakana, you can use japanese module.

Run demo localy

npm run example

Known Issue

Core library is here

  • Invalid behavior when same Kanji is input.

Github Repository

Tags: #React #Input