React Flick Keyboard

A reusable, accessible, and customizable Japanese Flick Keyboard component for React.

Features

• 🧠 Headless Architecture: Use useFlickKeyboard to build your own UI.
• 📱 Touch & Mouse Support: Works seamlessly on mobile and desktop.
• ⌨️ Standard Layout: Implements the standard 10-key Japanese flick layout.
• 🎨 Optional UI: Ready-to-use Tailwind styled components included.
• 🔄 Flick & Toggle: Supports both flick gestures and toggle (multi-tap) input.

Installation

npm install react-flick-keyboard
# or
yarn add react-flick-keyboard

Usage

1. Default UI (Easy Mode)

Import the styles and the component:

import { useState } from 'react';
import { FlickKeyboard } from 'react-flick-keyboard';
import 'react-flick-keyboard/dist/style.css'; // Import styles

function App() {
  const [text, setText] = useState('');

  const handleInput = (char: string) => {
    setText((prev) => prev + char);
  };

  return (
    <div className="p-4">
      <input value={text} readOnly />
      <FlickKeyboard 
        onInput={handleInput}
        currentInput={text.slice(-1)} 
      />
    </div>
  );
}

2. Headless Mode (Custom UI)

Use the useFlickKeyboard hook to build your own interface.

import { useFlickKeyboard, FLICK_KEYBOARD_LAYOUT } from 'react-flick-keyboard';

function CustomKeyboard() {
  const { 
    handleCharInput, 
    handleModifier 
  } = useFlickKeyboard({
    onInput: (char) => console.log(char),
  });

  return (
    <div>
      {/* Build your own grid */}
      <button onClick={() => handleCharInput('あ', 'a', true)}>あ</button>
      {/* ... */}
    </div>
  );
}

Development

1. Install dependencies:

   npm install

2. Start dev server:

   npm run dev

3. Build library:

   npm run build

License

MIT