Skip to main content

​
Text Processing

​
removeTashkeel

Removes Arabic diacritical marks (tashkeel) from text. Location: src/utils/search.ts:1
​
text
string
required
Arabic text containing diacritical marks
​
return
string
Text with all tashkeel removed and wasl sign normalized
Features:
  • Replaces wasl sign (ٱ) with regular alef (ا)
  • Removes harakat and diacritics (Unicode ranges U+064B-065F, U+0670, U+06D6-06E8)
  • Preserves base Arabic characters
import { removeTashkeel } from '@/utils/search';

const withDiacritics = 'سُورَةُ الفَاتِحَة';
const clean = removeTashkeel(withDiacritics);
// Output: "سورة الفاتحة"

​
normalizeArabicText

Normalizes Arabic text by removing diacritics and standardizing characters for searching. Location: src/utils/search.ts:17
​
text
string
required
Arabic text to normalize
​
return
string
Normalized text suitable for comparison and search
Transformations:
  • Removes all tashkeel (via removeTashkeel)
  • Normalizes alef variants (آ، أ، إ → ا)
  • Normalizes hamza variants (ؤ، ئ → ء)
  • Normalizes ya/alif maqsura (ى → ي)
  • Removes tatweel (ـ)
  • Normalizes hamza above/below (ٔ، ٕ → ء)
  • Converts taa marbuta to haa (ة → ه)
import { normalizeArabicText } from '@/utils/search';

const search = normalizeArabicText('محمّد');
const name = normalizeArabicText('مُحَمَّد');

if (name.includes(search)) {
  console.log('Match found!');
}

​
Formatting

​
formatTime

Converts seconds to MM:SS time format. Location: src/utils/format-time.ts:1
​
seconds
number
required
Time in seconds (can include decimals)
​
return
string
Formatted time string in M:SS or MM:SS format
Features:
  • Floors seconds to whole numbers
  • Pads seconds with leading zero if needed
  • No hour support (assumes tracks under 60 minutes)
import { formatTime } from '@/utils/format-time';

formatTime(45);      // "0:45"
formatTime(125);     // "2:05"
formatTime(3661.5);  // "61:01"

​
Styling

​
cn

Utility for merging Tailwind CSS classes with proper precedence. Location: src/utils/cn.ts:4
​
...inputs
ClassValue[]
required
Class names, objects, or arrays to merge
​
return
string
Merged class string with Tailwind conflicts resolved
Features:
  • Uses clsx for conditional classes
  • Uses tailwind-merge for proper Tailwind class precedence
  • Handles strings, objects, arrays, and conditional classes
import { cn } from '@/utils/cn';

// Basic merging
cn('p-4', 'bg-red-500');
// "p-4 bg-red-500"

// Conditional classes
cn('text-base', isError && 'text-red-500');
// "text-base text-red-500" (if isError is true)

// Override with proper precedence
cn('p-4', 'p-8');
// "p-8" (later p-8 overrides p-4)

// Object syntax
cn({
  'bg-blue-500': isPrimary,
  'bg-gray-500': !isPrimary
});

​
Data Processing

​
generateFavId

Generates a unique identifier for a reciter-moshaf combination. Location: src/utils/generate-fav-id.ts:3
​
reciter
Reciter
required
Reciter object containing id and moshaf.id
​
return
string
Unique ID in format {reciterId}-{moshafId}
Usage:
  • Storing favorites in local storage
  • Tracking favorite counts
  • Identifying unique reciter-moshaf pairs
import { generateFavId } from '@/utils/generate-fav-id';
import type { Reciter } from '@/types';

const reciter: Reciter = {
  id: 123,
  name: 'Abdul Basit',
  moshaf: {
    id: '456',
    name: 'Murattal',
    riwaya: Riwaya.Hafs,
    server: 'https://...',
    surah_total: '114',
    playlist: []
  },
  source: LinkSource.MP3QURAN
};

const favId = generateFavId(reciter);
// "123-456"

​
Sharing

​
useShareReciter

Hook for sharing reciter profiles via Web Share API or clipboard. Location: src/utils/share.ts:5 Returns:
​
shareReciter
(reciter: Reciter) => Promise<void>
Async function to share a reciter
Features:
  • Uses native Web Share API when available
  • Falls back to clipboard copy
  • Generates shareable URL with reciter ID and moshaf ID
  • Internationalized messages
  • User feedback via alerts
import { useShareReciter } from '@/utils/share';

function ReciterProfile({ reciter }: { reciter: Reciter }) {
  const { shareReciter } = useShareReciter();

  return (
    <button onClick={() => shareReciter(reciter)}>
      Share this reciter
    </button>
  );
}

​
Type Exports

All utilities are exported from the main index file: Location: src/utils/index.ts:1-11 
export * from './cn';
export * from './config';
export * from './format-time';
export * from './generate-fav-id';
export * from './get-circular-replacer';
export * from './get-error-message';
export * from './is-valid-email';
export * from './is-valid-magnet-uri';
export * from './normalize-app-url';
export * from './sanitize-html';
export * from './search';
Some utilities listed in the index are not documented here. Additional utilities can be found in the source code at src/utils/.

Build docs developers (and LLMs) love

Get started for freeTalk to us