Headless Amazigh (Tamazight) keyboard hook for React — Tifinagh & Latin scripts, zero styling, full control
# amazigh-keyboard
> Headless Amazigh (Tamazight) keyboard hook for React — supports Tifinagh and Latin scripts.
```bash
npm install amazigh-keyboard
```
---
## Why this exists
Every app that needs a Tifinagh keyboard builds one from scratch. There are websites that implemented their own — but the code is buried inside their project, not reusable, not shareable. The next developer who needs the same thing starts over from zero.
That means hours spent on key mappings, state management, and script toggling — time that should go toward the actual problem being solved.
`amazigh-keyboard` is the shared piece everyone was rebuilding. Install it, wire up the hook, focus on your product.
---
## Why headless?
You control the UI completely — layout, colors, size, animations. The hook handles all the state and logic. No styles to fight, no CSS to override.
---
## Quick start
```tsx
import { useAmazighKeyboard } from 'amazigh-keyboard'
function MyKeyboard() {
const { value, rows, onKey, onBackspace, onClear, toggleScript, script } = useAmazighKeyboard()
return (
{value}
{script}
{rows.map((row, i) => (
{row.keys.map(key => (
onKey(key.char)}>
{key.label}
))}
))}
⌫
Clear
)
}
```
---
## API — `useAmazighKeyboard(options?)`
### Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `initialScript` | `'tifinagh' \| 'latin'` | `'tifinagh'` | Starting script |
| `initialValue` | `string` | `''` | Starting text |
| `onChange` | `(value: string) => void` | — | Called on every change |
| `maxLength` | `number` | — | Max character limit |
### Returns
| Property | Type | Description |
|----------|------|-------------|
| `value` | `string` | Current text |
| `script` | `Script` | Current script |
| `rows` | `KeyRow[]` | Key rows for current script |
| `keys` | `Key[]` | All keys flat |
| `onKey` | `(char: string) => void` | Press a key |
| `onBackspace` | `() => void` | Delete last character |
| `onClear` | `() => void` | Cle …