Arabic Virtual Keyboard

About

Arabic Virtual Keyboard is a tool that helps english speakers write in Arabic without having a dedicated arabic keyboard.

The keyboard is fully featured and contains support for all letters, numbers, special characters, diacritical marks, and text to speech.

View Demo Here

Documentation

This keyboard was built as a web component and is fully compatiable with your JS, React, Angular or Vue projects.

You can use arabic-virtual-keyboard as a tag from a CDN, or install it from npm.

Installation Via NPM

npm i arabic-virtual-keyboard

Installation Via CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/arabic-virtual-keyboard/+esm"></script>

Usage

<div>
  <arabic-keyboard></arabic-keyboard>
</div>

Usage in React

This requires use of the @lit/react package

npm install @lit/react

import React from 'react';

import { ArabicKeyboard as ArabicKeyboardWC } from 'arabic-virtual-keyboard'
import {createComponent} from '@lit/react';

const ArabicKeyboard = createComponent({
  tagName: 'arabic-keyboard',
  elementClass: ArabicKeyboardWC,
  react: React,
});

function App() {
  return (
    <div>
      <ArabicKeyboard showEnglishValue="true" showShiftedValue="true"></ArabicKeyboard>
    </div>
  )
}

export default App

Attributes

showEnglishValue -> show transliterated english key showShiftedValue -> show shifted value of key

| Attribute | Default | | ---------------- | :-----: | | showEnglishValue | false | | showShiftedValue | false |

Usage With Attributes

<div>
  <arabic-keyboard showEnglishValue="true" showShiftedValue="true">
  </arabic-keyboard>
</div>

Styling

Restyle the keyboard by utilizing css custom properties

| Property | Default | | -------------------------------- | ------------------- | | --keyboard-row-gap | 4px | | --font-size | 18px | | --max-keyboard-width | 800px | | --row-height | 50px | | --border-radius | 4px | | --button-background-color | #ececec | | --border | 1px solid #999999 | | --button-active-background-color | #d6d6d6 | | --button-active-border | 1px solid #8f8f8f | | --button-padding | 4px | | --button-color | #000000 | | --button-shifted-color | #ff0000 | | --button-eng-color | #0000ff | | --button-hover-background-color | #e0e0e0 | | --textarea-background-color | #ffffff | | --font-family | "Arial", sans-serif |