This content originally appeared on DEV Community and was authored by Asad Rafi
I Built an NPM Tool That Automates React i18n in Seconds (No More Manual Translation Hell!)
Stop spending hours manually setting up internationalization. This tool does it automatically.
The Problem That Drove Me Crazy
Picture this: You’re working on a React project, and suddenly the client says “We need this in 5 languages by next week.”
Your heart sinks because you know what’s coming:
Hours of manually wrapping text in t() functions
Creating translation files from scratch
Managing unused keys that break everything
Team members accidentally mixing up i18n commands
Forgetting which files need translation updates
I’ve been there. We’ve all been there. It’s 2025, why are we still doing this manually?
The Solution: Auto-Translation v2.0
I built an NPM package that completely automates React i18n setup. Here’s what it does:
bashnpx auto-translation init
Sets up your entire i18n structure in seconds
npx auto-translation scan
Finds all translation keys in your project
npx auto-translation wrap
Automatically converts plain text to t() calls
npx auto-translation ignore-init
Smart ignore system for brand names & technical terms
Key Features That Make It Special
- Intelligent Mode Detection The tool automatically detects your project type and adjusts commands accordingly. No more confusion about which command to run!
- Automatic Text Wrapping
jsx// Before
Welcome to Dashboard
Manage your account settings
Save Changes
// After (Automatically generated)
{t(‘welcome_to_dashboard’)}
{t(‘manage_your_account_settings’)}
{t(‘save_changes’)}
- Smart Ignore System It knows that brand names, technical terms, and code shouldn’t be translated: json{ “ignoredKeys”: [ “GitHub”, “API”, “JavaScript”, “companyName” ] }
- Interactive File Selection Choose exactly which files to process – no more accidentally translating config files!
- Unused Key Cleanup
Automatically removes dead translation keys that bloat your files.
Real Developer Testimonials
“This tool is incredible! Saved me 6 hours on our React dashboard. The mode system automatically knew what commands to run.”
“The strict mode feature is genius! No more team members mixing up commands.”
“Auto-wrap feature saved my project! Converted 200+ components automatically. What used to take days now takes minutes.”
Before vs After
TaskManual WayAuto-TranslationSetup i18n structure2-3 hours30 secondsWrap 100 components4-6 hours2 minutesFind unused keys1-2 hoursAutomaticUpdate translation files30 minutes10 seconds
Quick Start Guide
- Initialize Your Project bashnpx auto-translation init This creates your entire i18n folder structure with proper configuration.
- Scan for Translation Keys bashnpx auto-translation scan Automatically finds all text that needs translation in your React components.
- Wrap Plain Text (Magic!) bashnpx auto-translation wrap Converts all plain text to proper t() translation calls.
- Set Up Smart Ignoring
bashnpx auto-translation ignore-init
Creates an ignore system for technical terms and brand names.
What Makes This Different? Other Solutions:
Manual setup required
No automatic text wrapping
Complex configuration
No team collaboration features
Basic key management
Auto-Translation:
npm : https://www.npmjs.com/package/auto-translation
Zero configuration needed
Automatic text detection & wrapping
Intelligent project detection
Team-friendly with strict modes
Smart key management & cleanup
What’s Coming Next?
React Native Mode – Mobile app i18n automation
Node.js Backend Mode – Server-side translation management
Multi-framework Support – Vue, Angular, and more
AI-Powered Translation – Automatic language generation stay tuned
This content originally appeared on DEV Community and was authored by Asad Rafi