/email-genie

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Primary LanguageJavaScript

Email Genie

Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery, etc.) / frameworks (React, Angular, Vue, etc.) and maximize native behaviors on desktop AND mobile browsers.

👍 Lite 5kb (2kb Gzipped) ⚡ Fast Native JavaScript 🚫 No Dependencies 🚫 No HTML Wrapper 🚫 No CSS injected

Examples

Installation

npm i email-genie

Import

CDN

<script src="https://unpkg.com/email-genie"></script>;

Classic

const EmailGenie = require('email-genie');

ES6

import EmailGenie from 'email-genie';

Usage

Text selector

const email = new EmailGenie('.email');

Vanilla JS

const elem = document.querySelector('.email')
const field = new EmailGenie(elem);

jQuery

const field = new EmailGenie($('.email'));

Add custom domains

const field = new EmailGenie('.email', {
  domains: ['business.com', 'company.com', 'university.com'],
});

Options

Option Default Possibilities Description
domains ['gmail.com', 'outlook.com', 'hotmail.com', 'msn.com', 'live.com', 'googlemail.com', 'yahoo.com', 'me.com', 'icloud.com'] [] Array of domains suggestions. (By default, this array will be added to the default domains suggestions. View overrideDomains option to override instead.)
overrideDomains false Boolean (true/false) Wether the domains suggestions array should override the default one.
insert 'afterend' 'beforebegin', 'afterend', 'documentend' Where the datalist generated should be inserted: Before the input, after the input, at the end of the document.

Support

Chrome, Firefox, Safari, Edge, IE 11

Email Genie