Package Exports

react-use-kana

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-use-kana) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Kana Provider

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

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: { lastNameKana },
    setKanaSource,
  } = useKana(['lastNameKana']);

  return (
    <form>
      <div>
        <span>Japanese Traditional Form</span>
      </div>
      <div>
        <div>
          <span>Name</span>
        </div>
        <input
          type="text"
          onChange={e =>
            setKanaSource({
              fieldName: 'lastNameKana',
              inputtedValue: e.target.value,
            })
          }
        />
      </div>
      <div>
        <div>
          <span>Name Kana</span>
        </div>
        <input type="text" value={lastNameKana} />
      </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 in https://github.com/ohbarye/react-use-kana/tree/master/example.

Feature

This library uses:

React Hooks
historykana (Many thanks to @terrierscript)

Requirement

react >= 16.8