Simple web application writen with ReactJS and VanillaJS. Application present single view to show list of email address in it.
Button "Add email" add random email to email list Button "Get Emails Count" alert notification with number of emails in list. (Invalid emails included)
Email list works as input component. You can type in as in regular input field. After "comma" or "enter" key pressed all entered text before will transform to email blocks. If multiple separate with comma emails pasted, they all will be converted to email blocks. "asd@mail.com,more@gmail.com"
Every email address checked with validation function. Invalid format emails will be rendered with red underline.
EmailsInput store entered emails. If entered email address already exist email list notification alert will pop up with message. Entered value will be cleared.
Component using EmailInput function to create email list. There is list of style properties that can be passed as arguments to change style/layout of EmailInput view.
- className Custom style name of EmailInput root view
- validEmailItemClassName Custom style name of valid email item view
- invalidEmailItemClassName Custom style for invalid email item view
- removeButtonClassName Custom style name of email item remove button view
- inputClassName Custom style name of email item remove button view
Component EmailsInput exist inside of container that should be passed using "parentNode" property name. No EmailsInput will be rendered if container is not provided. List of functional properties:
- parentNode EmailInput container element
- inputPlaceHolder Input field placeHolder Custom style name of email item remove button view
- onChange Event handler to catch Emails list updates
- value Initial value of Emails list. Should contain email addresses divided by comma (email@one.com,email@two.com...)
- addEmail add new Emails in a list,
- getEmails return emails string array
- getEmailCount return emails count number
- el return EmailInput element reference
Production version hosted on https://github.com/HrudakovSerhii/hrudakovserhii.github.io