WanaKanaReact

React wrapper for WanaKana.js

Example demo

https://wanakanareact.netlify.com

To do

• [ ] Add ability to use a custom component

Different options

// default - romaji to kana
<WanakanaInput value="konnnichiwa" />

// kana to romaji
<WanakanaInput to="romaji" value="こんにちわ" />

// romaji to hiragana
<WanakanaInput to="hiragana" value="konnnichiwa" />

// romaji to katakana
<WanakanaInput to="katakana" value="TABERU" />

Useful props

| Name | Value | | --- | --- | | to | kana (default), romaji, hiragana, katakana | | component | any valid dom element (input, textarea, etc) |

To use in a form

import WanakanaInput from 'react-wanakana';

const WanakanaInput = () => {
  const [greeting, setGreeting] = useState('こんにちわ');
  const handleChange = e => {
    setGreeting(e.target.value);
  };

  return (
    <form
      onSubmit={(e, values) => {
        e.preventDefault();
        alert(greeting);
      }}
    >
      <WanakanaInput name="greeting" value={greeting} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

To develop in storybook

npm run storybook