Detect and block any disposable email services with JavaScript.

benemohamed

benemohamed

Posted on June 16, 2023

Detect and block any disposable email services with JavaScript.

πŸ”’ Welcome to the Disposable Email Blocker! πŸ”₯

Description πŸ“

The Disposable Email Blocker is a powerful tool designed to detect and prevent the use of disposable email services for account registrations. πŸš«πŸ’»

Demo

Features ✨

  • πŸ›‘οΈ Protects all HTML forms.
  • πŸ›‘οΈ Detects invalid email addresses and domains
  • πŸ›‘οΈ Blocks disposable email services
  • πŸ›‘οΈ Blocks webmail email services
  • πŸ›‘οΈ Custom error messages
  • πŸ›‘οΈ Our system stays ahead of the game by continuously updating the database of disposable email providers to effectively identify new ones.

How to use πŸš€

To get started, follow these simple steps:

Install

NPM version
NPM bundle size
npm download

$ npm install disposable-email-blocker --save
# or
$ yarn add disposable-email-blocker
Enter fullscreen mode Exit fullscreen mode

Usage πŸ–₯️

import { Blocker } from 'disposable-email-blocker';
Enter fullscreen mode Exit fullscreen mode
new Blocker();
Enter fullscreen mode Exit fullscreen mode

Use in browser

To use via a CDN include this in your HTML.

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/disposable-email-blocker/disposable-email-blocker.min.js"></script>
<script>
    new Disposable.Blocker();
</script>
Enter fullscreen mode Exit fullscreen mode

or

<script
    src="https://cdn.jsdelivr.net/npm/disposable-email-blocker/disposable-email-blocker.min.js"
    block
></script>
Enter fullscreen mode Exit fullscreen mode

Using unpkg CDN:

<script src="https://unpkg.com/disposable-email-blocker/disposable-email-blocker.min.js"></script>
<script>
    new Disposable.Blocker();
</script>
Enter fullscreen mode Exit fullscreen mode

or

<script
    src="https://cdn.jsdelivr.net/npm/disposable-email-blocker/disposable-email-blocker.min.js"
    block
></script>
Enter fullscreen mode Exit fullscreen mode

Customizing Blocker

The Blocker constructor parameter.

Simple options

const defaults = {
    apiUrl: 'string',
    data: 'TombaStatusResponse[]',
    disposable: {
        message: 'string',
    },
    webmail: {
        message: 'string',
        block: false,
    },
    emailError: {
        className: 'string',
        style: `string`,
    },
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode
  • apiUrl API URL.
  • data Custom Data.
  • disposable.message disposable error message.
  • webmail.message webmail error message.
  • webmail.block block webmail emails.
  • emailError.className HTML tag class .
  • emailError.style css style.

Custom disposable message

To disposable message:

const defaults = {
    disposable: {
        message:
            'Abuses, strongly encourage you to stop using disposable email',
    },
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode

Custom webmail message

To webmail message:

const defaults = {
    webmail: {
        message:
            'Warning, You can create an account with this email address, but we strongly encourage you to use a professional email address',
    },
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode

Custom API URL

const defaults = {
    apiUrl: 'string',
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode

Custom Data

This will stop API call

const defaults = {
    data: [
        {
            domain: 'coronafleet.com',
            webmail: true,
            disposable: false,
        },
    ],
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode

Block webmail emails

const defaults = {
    webmail: {
        block: true,
    },
};
new Disposable.Blocker(defaults);
Enter fullscreen mode Exit fullscreen mode

Event

use the on() API method.
Available Event name done the Content is revealed on onInput

const blocker = new Blocker();
blocker.on('done', (e) => {
    if (e.detail.disposable) {
        alert(blocker.options.disposable.message);
    }
});
Enter fullscreen mode Exit fullscreen mode

Free Plugins / Forum / E-Commerce / CMS ♾️

Platform URL Status
wordpress wordpress-disposable-email-blocker βœ…
MyBB mybb-disposable-email-blocker βœ…
LiteCart litecart-disposable-email-blocker βœ…
Cloudflare cloudflare-disposable-email-blocker βœ…
Vue 2 disposable-email-blocker-vue-2 βœ…
Vue 3 disposable-email-blocker-vue-3 🚧
React disposable-email-blocker-react 🚧
Joomla 🚧
Drupal 🚧

Development πŸ‘¨β€πŸ’»

For development

Setup

  1. Clone this repository into it:
git clone https://github.com/tomba-io/disposable-email-blocker.git
cd disposable-email-blocker
yarn
Enter fullscreen mode Exit fullscreen mode

Develop & debug

To start debugging session run:

yarn start
Enter fullscreen mode Exit fullscreen mode

Note that while changes to experiments.ts
are hot-reloaded, changes to template.html are not.

Note You can set breakpoints in your code and run a debugging session in vsc and other editors.

Build

yarn build
Enter fullscreen mode Exit fullscreen mode

The output is in the /dist.

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

Contributing

  1. Fork it (https://github.com/tomba-io/disposable-email-blocker/fork)
  2. Create your feature branch (git checkout -b my-new-email)
  3. Commit your changes (git commit -am 'Add new email')
  4. Push to the branch (git push origin my-new-email)
  5. Create a new Pull Request

Contributors

License

GitHub license

πŸ’– πŸ’ͺ πŸ™… 🚩
benemohamed
benemohamed

Posted on June 16, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related