This package has been deprecated

    Author message:

    this package has been deprecated. use https://www.npmjs.com/package/react-use-kana instead.

    react-kana-provider
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    React Kana Provider

    A tiny context provider to build a better Japanese form.

    NOTE: This library is really experimental. API, specification or anything can change in the future.

    Usage

    You can see an example app in https://github.com/ohbarye/react-kana-provider/tree/master/example.

    Installation

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

    Basic

    Let's see the easiest example.

    kana

    import React from "react";
    import ReactDOM from "react-dom";
    import { KanaProvider, KanaDispatcher, KanaConsumer } from "react-kana-provider";
     
    const App = () => (
      <KanaProvider fieldNames={["last_name"]}>
        <KanaDispatcher>
          {({ setKana }) => (
            <input
              type="text"
              onChange={e => setKana("last_name", e.target.value)}
            />
          )}
        </KanaDispatcher>
        <KanaConsumer>
          {({ kana }) => (
            <input
              type="text"
              value={kana.last_name}
            />
          )}
        </KanaConsumer>
      </KanaProvider>
    );
     
    ReactDOM.render(<App />, document.getElementById("root"));

    As like above, react-kana-provider serves 3 components.

    1. KanaProvider
      • KanaProvider is a provider of context. You need to pass field names as props so that the context can have multiple kana. I believe it's very common that a Japanese form has two kana fields for last name and first name.
    2. KanaDispatcher
      • KanaDispatcher is a consumer of context, but it serves dispatch method to let the context update kana which corresponds to the given field name.
    3. KanaConsumer
      • KanaConsumer is a consumer of context to receive an object which contains kana.

    TypeScript

    KanaDispatcherProps and KanaConsumerProps are available to give type definition.

    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import {
      KanaProvider,
      KanaDispatcher,
      KanaConsumer,
      KanaDispatcherProps,
      KanaConsumerProps
    } from "react-kana-provider";
     
    const App = () => (
      <KanaProvider fieldNames={["last_name"]}>
        <KanaDispatcher>
          {({ setKana }: KanaDispatcherProps) => (
            <input 
              type="text"
              onChange={e => setKana("last_name", e.target.value)}
            />
          )}
        </KanaDispatcher>
        <KanaConsumer>
          {({ kana }: KanaConsumerProps) => (
            <input 
              type="text"
              value={kana.last_name}
             />
          )}
        </KanaConsumer>
      </KanaProvider>
      );
    );
     
    ReactDOM.render(<App />, document.getElementById("root"));

    Feature

    This library uses:

    Requirement

    • react >= 16.8

    Install

    npm i react-kana-provider

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    8.74 kB

    Total Files

    12

    Last publish

    Collaborators

    • ohbarye