https://github.com/tylerwolff/wanakanareact
React wrapper for WanaKana.js
https://github.com/tylerwolff/wanakanareact
hiragana katakana react romaji romaji-translation
Last synced: 21 days ago
JSON representation
React wrapper for WanaKana.js
- Host: GitHub
- URL: https://github.com/tylerwolff/wanakanareact
- Owner: tylerwolff
- License: mit
- Created: 2019-06-18T23:57:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:54:52.000Z (over 2 years ago)
- Last Synced: 2025-04-20T01:33:20.600Z (about 1 month ago)
- Topics: hiragana, katakana, react, romaji, romaji-translation
- Language: JavaScript
- Homepage: https://wanakanareact.netlify.com
- Size: 783 KB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WanaKanaReact
[![npm package][npm-badge]][npm]
React wrapper for [WanaKana.js](https://wanakana.com/)
## Example demo
https://wanakanareact.netlify.com
## To do
- [ ] Add ability to use a custom component
## Different options
```jsx
// default - romaji to kana
// kana to romaji
// romaji to hiragana
// romaji to katakana
```
### Useful props
| Name | Value |
| --- | --- |
| **to** | `kana` (default), `romaji`, `hiragana`, `katakana` |
| **component** | any valid dom element (`input`, `textarea`, etc) |
## To use in a form
```jsx
import WanakanaInput from 'react-wanakana';
const WanakanaInput = () => {
const [greeting, setGreeting] = useState('こんにちわ');
const handleChange = e => {
setGreeting(e.target.value);
};
return (
{
e.preventDefault();
alert(greeting);
}}
>
Submit
);
};
```
## To develop in storybook
`npm run storybook`
[npm-badge]: https://img.shields.io/npm/v/react-wanakana.svg
[npm]: https://www.npmjs.org/package/react-wanakana