A lightweight, drop-in React component that stops fake users from ruining your database.
Standard Regex (^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$) is no longer enough. Users sign up with temp-mail.org or accidentally type user@gmil.com, resulting in lost leads, high bounce rates, and spam.
This component automatically:
✅ Checks if the domain has active MX records (Live DNS check).
✅ Blocks thousands of disposable/burner email providers.
✅ Rejects role-based generic emails (admin@, info@, support@) to improve lead quality.
✅ Detects fat-finger typos (e.g., yaho.com) and suggests fixes with a 1-click update.
1. Get your API Key (Free) This component is powered by the Edge-optimized EmailGuard API. 👉 Get your 100 free requests/month API Key here
2. Copy the Component
Copy the code from SmartEmailInput.jsx into your project. It is styled with Tailwind CSS by default, but you can easily adapt it to standard CSS, Material UI, or Chakra UI.
3. Paste your Key
Replace the RAPIDAPI_KEY string at the top of the file with your key.
To save your API quota, the validation triggers on onBlur (when the user clicks out of the input field). This ensures you only use 1 API request per user signup, keeping your costs incredibly low.
Many developers rely on a standard email validation regex in React or Next.js to validate their forms. The problem? Regex is no longer enough.
A javascript regex only checks if the string looks like an email (e.g., it contains an @ symbol and a dot). It will happily accept fakeuser@temp-mail.org or user@gmil.com because syntactically, they are valid.
This drop-in component replaces basic regex with a serverless edge API. It performs live DNS queries (checking MX Records) and uses Levenshtein distance algorithms to ensure the email is actually real, active, and typo-free before it ever hits your database. Stop relying on regex and start validating reality.