Package Exports

react-wanakana

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-wanakana) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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