react-email-chips

Email chips component

This is react component to create email chips list

I know there is more advanced component's of this type but this gives exactly what I need .

I forked my code from
https://codepen.io/broneks/pen/objeqq

The component can receive the following props

• placeholder - to be placed in the input
• pattern - to validate the chips - can be empty then all chips are valid
• required - force the list to have at least one value
• title - title of the component
• save - a callback to be called on each change (add , delete)

import React from 'react';
import Chips from 'react-email-chips';

function DemoComponent() {
	const pattern = new RegExp(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/);
	return (
		<div className='Demo'>
			<Chips
				chips={[{ email: '[e-mail]', valid: true, key: '1' }, { email: '[e-mail]', valid: true, key: '2' }, { email: '[e-mail]', valid: true, key: '3' }]}
				placeholder='Add a tag...'
				save={data => console.log('new data', data)}
				pattern={pattern}
				required={true}
				title='Email Chips:'
				limit='5'
				limitNotification={data => console.log('limit notification', data)}
			></Chips>
		</div>
	);
}

License

MIT Licensed.