Skip to content
React japanese auto input kana
JavaScript CSS HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
test fix index point Apr 12, 2015
.eslintignore
.eslintrc
.gitattribute
.gitignore
README.md
circle.yml
gh-pages.sh
index.js
package.json

README.md

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.
You can’t perform that action at this time.