1.1.2 • Published 4 years ago
@anche/emails-input v1.1.2
Getting Started
yarn add @anche/emails-input
Features
- Creates email pills on comma, whitespace, Enter key presses
- Creates email pills on paste event
- Creates email pill on blur event
- IE11 compatible
- Scrollable input
- Multiple EmailsInput components are supported on one page
- Backspace selects and removes previous/selected pills (extra)
- Select pills by clicking on them (extra)
Examples
Setup the component and mount to a target
<html>
<head><title>Angelo for Miro</title></head>
<body>
<div id="emails-input"></div>
</body>
</html>import EmailsInput from '@anche/emails-input';
const target = document.querySelector('#emails-input');
const input = new EmailsInput();
input.mount(target);API
Add email(s) using addEmails()
addEmails(...emails: string[])
// Each email can be a new argument
input.addEmails('first@email.com', 'second@email.com');
// The string can also contain multiple emails
input.addEmails('first@email.com, angelo.a@me.com');
Get valid, invalid or all emails
getEmails('valid' | 'invalid' | ''): string[]
const validEmails = input.getEmails('valid');
const invalidEmails = input.getEmails('invalid');
const allEmails = input.getEmails();
Subscribe to create or delete events by supplying a listener
on('create' | 'delete', ({ email: string, valid: boolean}) => void)
emailsInput.on('create', ({ email, valid }) => {
console.log('The added email:', email);
console.log('Is this email valid?', valid);
});
emailsInput.on('delete', ({ email, valid }) => {
console.log('The deleted email:', email);
console.log('Was this email valid?', valid);
});
Deletes all current emails and replaces them with new ones supplied as arguments
replaceEmails(...emails: string[])
input.replaceEmails('first@one.com', 'second@one.com');
// ['first@one.com, 'second@one.com'];
console.log(input.getEmails());
Deletes a current email
deleteEmail(email: string)
input.deleteEmail('first@one.com');