📖 word-meaning-dictionary

A lightweight npm plugin that lets users select any word on your website and instantly see its English meaning, Hindi translation, and pronunciation — with zero configuration.

🚀 What Is This Plugin?

word-meaning-dictionary is an npm package you can add to any web project. Once installed, it automatically listens for word selections on your webpage. When a user selects a word (by double-clicking or dragging), a beautiful popup appears showing:

• ✅ English meaning of the word
• ✅ Hindi translation
• ✅ Example sentence based on context
• ✅ Speaker icon to hear pronunciation (in both English and Hindi)

📦 Installation

npm install word-meaning-dictionary

🔧 Usage

Basic Setup

import WordMeaningDictionary from 'word-meaning-dictionary';

// Initialize the plugin — that's it!
WordMeaningDictionary.init();

With Options

import WordMeaningDictionary from 'word-meaning-dictionary';

WordMeaningDictionary.init({
  language: 'hi',        // Hindi translation (default: 'hi')
  theme: 'light',        // 'light' or 'dark' (default: 'light')
  showExample: true,     // Show example sentence (default: true)
  enableTTS: true,       // Enable text-to-speech (default: true)
});

Via CDN (No npm required)

<script src="https://cdn.jsdelivr.net/npm/word-meaning-dictionary/dist/index.min.js"></script>
<script>
  WordMeaningDictionary.init();
</script>

📖 How It Works

1. User visits your website
2. User double-clicks or drags to select any word
3. A popup appears with the English meaning, Hindi translation, and example
4. User clicks the 🔊 Speaker icon to hear the pronunciation
5. User clicks anywhere else to close the popup

✨ Features

| Feature | Description | |---|---| | ⚡ Instant Meanings | Select a word and get the meaning immediately | | 🌐 Bilingual Support | English definitions with Hindi translations | | 🧠 Context-Aware | Understands surrounding text to provide accurate meanings | | 🔊 Text-to-Speech | Listen to pronunciation in both English and Hindi | | 🎨 Beautiful Design | Modern, responsive popup with smooth animations | | ⚙️ Zero Configuration | Works out of the box with no setup required | | 📱 Mobile Friendly | Fully responsive design for all devices | | 🪶 Lightweight | Small bundle size with minimal impact on page load |

🛠️ Tech Stack

• Vanilla JavaScript — Zero dependency core logic
• CSS3 — Animations and responsive design (auto-injected)
• Web Speech API — Text-to-Speech (pronunciation)
• Dictionary API / Claude AI — Meanings and translations

🤝 Contributing

Contributions are welcome! If you find a bug or want a new feature:

1. Fork the repository
2. Create your branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m "Add: your feature"
4. Push the branch: git push origin feature/your-feature
5. Open a Pull Request

📄 License

MIT License — Free to use, modify, and distribute.

📬 Contact

If you face any issues, report them on GitHub Issues or reach out directly.

💡 Tip: This plugin works on any website or web app — React, Vue, Angular, or plain HTML. Just install and call init()!