Skip to content

ohbarye/react-use-kana

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Use Kana npm version CircleCI

A tiny React hook to build a better Japanese form. With this library, you can implement a feature to automatically fill in kana in your form.

basic

Usage

Installation

npm install react-use-kana
# or
yarn add react-use-kana

API

useKana

This is the only one hook that react-use-kana provides.

  • kana: string
    • A hiragana string that derived from inputs. You set this value to a text input for a kana field.
  • setKanaSource: (value: string) => void
    • A function to let useKana hook know a new input value so that it can derive kana. In general, you call this function as onClick callback of a text input for a name field which probably has kanjis or non-hiragana characters.

This hook accepts an option to define its conversion rule.

  • kataType: 'hiragana' | 'katakana' (Optional)
    • 'hiragana' is default. If you'd like to convert to katakana, declare like useKana({ kanaType: 'katakana' }).

Example

Let's see the following simple example.

import React from 'react';
import ReactDOM from 'react-dom';
import { useKana } from 'react-use-kana';

const App = () => {
  const { kana, setKanaSource } = useKana();

  return (
    <form>
      <div>
        <span>Japanese Traditional Form</span>
      </div>
      <div>
        <div>
          <span>Name</span>
        </div>
        <input type="text" onChange={(e) => setKanaSource(e.target.value)} />
      </div>
      <div>
        <div>
          <span>Name Kana</span>
        </div>
        <input type="text" value={kana} />
      </div>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

react-use-kana doesn't provide features to handle your form's behavior (e.g. to set value to a component's state, to check if a field has been touched or not) because it's supposed to be agnostic about form library.

📝 You can check more authentic example code on https://codesandbox.io/s/react-use-kana-example-1kxuh.

Feature

This library uses:

Requirement

  • react >= 16.8