GeoLingua

Reading-free geographic language selection for React apps.
Show users a globe. Let them tap their country. Hear their language spoken.
No reading required — ever.

Install

npm install geolingua three

three and react/react-dom are peer dependencies.

Usage

import { GeoLingua } from 'geolingua';

function App() {
  const handleLanguageSelect = (locale) => {
    i18n.changeLanguage(locale);
  };

  return <GeoLingua appName="MyApp" onLanguageSelect={handleLanguageSelect} />;
}

Themes

import { GeoLingua } from 'geolingua';

<GeoLingua theme="space" onLanguageSelect={handleLanguageSelect} />
// or: theme="fresco" (default) | "minimal" | "a11y"
// or: theme={customThemeObject}

Why GeoLingua

Standard language selectors require users to read a dropdown list. GeoLingua solves the bootstrap paradox: how do you select a language before you can read the interface?

The answer: geography is universal. Everyone knows where they live.

Voice Detection

GeoLingua includes a microphone button for voice-based language detection:

• Tier 1 (free): Uses browser SpeechRecognition with script-based heuristics
• Tier 2 (API key): OpenAI Whisper or Azure Cognitive Services for high accuracy

<GeoLingua
  voiceDetection={{ provider: 'whisper', openaiApiKey: 'sk-...' }}
  onLanguageSelect={handleLanguageSelect}
/>

Headless Hook

import { useGeoLingua } from 'geolingua';

const { state, handleCountryClick, handleLanguageSelect } = useGeoLingua({
  appName: 'MyApp',
  onLanguageSelect: (locale) => console.log(locale),
});

Used By

• ProtoViz — Interactive protocol visualization for network engineers

Documentation

See the full documentation for props, integration patterns, and advanced usage.

---

Open source · MIT · github.com/provandal/geolingua

Created by Erik Smith