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

``bash
npm install react-flick-keyboard


or


yarn add react-flick-keyboard
`

Usage

$3

Import the styles and the component:

`tsx
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 (



);
}
`

$3

Use the useFlickKeyboard hook to build your own interface.

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

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

return (



);
}
`

Development

1. Install dependencies:
`bash
npm install
`

2. Start dev server:
`bash
npm run dev
`

3. Build library:
`bash
npm run build
``

License

MIT