A reusable Japanese Flick Keyboard component for React
npm install react-flick-keyboardA reusable, accessible, and customizable Japanese Flick Keyboard component for React.
- š§ 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.
``bash`
npm install react-flick-keyboardor
yarn add react-flick-keyboard
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 (
{/ Build your own grid /}
{/ ... /}
);
}
`Development
1. Install dependencies:
`bash
npm install
`2. Start dev server:
`bash
npm run dev
`3. Build library:
`bash
npm run build
``MIT