Docs

npm i @yashau/thaana

import { attachKeyboard, loadFonts, fontStack } from '@yashau/thaana';
import '@yashau/thaana/thaana.css'; // sane defaults for :lang(dv)

await loadFonts({ family: 'Faruma' });
const input = document.querySelector('#name');
input.style.fontFamily = fontStack('Faruma');

let dv = true; // e.g. bound to a DV/EN toggle
const detach = attachKeyboard(input, { enabled: () => dv });

npm i @yashau/thaana-react

import { useState } from 'react';
import { ThaanaInput, useThaanaKeyboard, useDhivehiFont, fontStack } from '@yashau/thaana-react';

export function Form() {
  const [name, setName] = useState('');
  const [dv, setDv] = useState(true);
  useDhivehiFont('Faruma');
  const notes = useThaanaKeyboard<HTMLTextAreaElement>({ enabled: dv });

  return (
    <>
      <ThaanaInput dv={dv} value={name} onChange={(e) => setName(e.target.value)}
        style={{ fontFamily: fontStack('Faruma') }} />
      <textarea ref={notes} />
      <button onClick={() => setDv(!dv)}>{dv ? 'ދިވެހި' : 'EN'}</button>
    </>
  );
}

npm i @yashau/thaana-svelte

<script>
  import { ThaanaInput, thaana, thaanaKeyboard, loadFonts, fontStack } from '@yashau/thaana-svelte';

  let name = $state('');
  let dv = $state(true);
  loadFonts({ family: 'Faruma' });
</script>

<ThaanaInput {dv} bind:value={name} style="font-family: {fontStack('Faruma')}" />

<!-- or on any element -->
<textarea use:thaana={{ enabled: dv }}></textarea>
<div contenteditable {@attach thaanaKeyboard({ enabled: dv })}></div>

npm i @yashau/thaana-vue

<script setup>
import { ref } from 'vue';
import { ThaanaInput, vThaana, useDhivehiFont, fontStack } from '@yashau/thaana-vue';

const name = ref('');
const dv = ref(true);
useDhivehiFont('Faruma');
</script>

<template>
  <ThaanaInput v-model="name" :dv="dv" :style="{ fontFamily: fontStack('Faruma') }" />
  <textarea v-thaana="{ enabled: dv }"></textarea>
</template>

<!-- or globally: app.use(ThaanaPlugin) -->