z-email-spell-checker demo

Get started

z-email-spell-checker is a web-component that provides a simple way to validate an email and making a button to correct it.

It is an email-spell-checker library wrapper as a web-component.

---

Install via NPM

The component is available here on npm, you can install it via this command:

npm i @benavern/z-email-spell-checker

Then you can use it in your scripts like so in your js/ts module files:

import '@benavern/z-email-spell-checker';

---

Install via CDN

<script type="module" src="https://unpkg.com/@benavern/z-email-spell-checker"></script>

---

Have fun

Attribute + Event

You can use the email property and suggestion:apply event to handle the element.

Update the email property each time the input value changes, a suggestion will apear if the library returns any.

When a suggestion is clicked, a suggestion:apply is fired on the component, use it so that you can update the input value.

---

---

<span class="input-wrapper">
    <input
        id="attribute-event__input"
        type="email"
        placeholder="my@email.com">

    <z-email-spell-checker id="attribute-event__suggestion" />
</span>

import './z-email-spell-checker'
import type { ZEmailSpellChecker, MailSuggestion } from './z-email-spell-checker';

const $input = document.querySelector<HTMLInputElement>('#attribute-event__input');
const $suggestion = document.querySelector<ZEmailSpellChecker>('#attribute-event__suggestion');

$input?.addEventListener('input', (event) => {
    const email = (event.target as HTMLInputElement).value.trim();
    if ($suggestion) $suggestion.email = email;
});

$suggestion?.addEventListener('suggestion:apply', (event) => {
    const suggestion = (event as CustomEvent<MailSuggestion>).detail.full;

    if ($input) {
        $input.value = suggestion;
        $input.dispatchEvent(new Event('input', { bubbles: true }));
    }
});

With ID

You can add an id attribute to the input element and a spell-checker-target attribute on the component with the same value.

The component will then look for an input in the document with the id with the same value than the spell-checker-target attribute.

If there is any, it will then watch its value, check the spelling of the value and provide suggestion.

When you click on the suggestion, the input will be filled with the value of the suggestion.

---

---

<span class="input-wrapper">
    <input
        id="with-id__input"
        type="email"
        placeholder="my@email.com">

    <z-email-spell-checker spell-checker-target="with-id__input" />
</span>

💡 Note: no js is needed here, we just play with the id and attribute

Configuration

You can configure the component by using its static method configure

Here is the example configuration on this demo page:

ZEmailSpellChecker.configure({
    domains: [
        ...ZEmailSpellChecker.POPULAR_DOMAINS,
        'caradeuc.info',
    ],
    distanceFunction(domain: string, knownDomain: string) {
        const dist = ZEmailSpellChecker.distanceFunction(domain, knownDomain);
        // force prioritize .com matches over .co and .ca
        // @see: https://github.com/smashsend/email-spell-checker/issues/33
        if (knownDomain === 'com') return dist - 0.75;
        return dist;
    }
});

The config object is the same (minus the email attribute) as the UserOptions object in the original library .

type DistanceFunction = (a: string, b: string, threshold?: number) => number;

interface MailSuggestion {
  address: string;
  domain: string;
  full: string;
}

interface UserOptions {
  email: string;
  domains?: string[];
  domainThreshold?: number;
  topLevelDomains?: string[];
  topLevelThreshold?: number;
  secondLevelDomains?: string[];
  secondLevelThreshold?: number;
  distanceFunction?: DistanceFunction;
  // Callbacks code. Totally optional
  suggested?: (suggestion?: MailSuggestion) => void;
  empty?: () => void;
}

---

For convenience, static properties have been added on the webComponent's class:

static POPULAR_DOMAINS = POPULAR_DOMAINS;
static POPULAR_TLDS = POPULAR_TLDS;
static distanceFunction = sift3Distance;