react-multi-email

A simple react component to format multiple email as the user types.

Simple code
No dependency
Small size
Simple customization

Installation

npm install react-multi-email

Usage

```typescript jsx import * as React from 'react'; import { ReactMultiEmail, isEmail } from 'react-multi-email'; import 'react-multi-email/dist/style.css';

interface Props {}

function BasicExample(props: Props) { const [emails, setEmails] = React.useState<string[]>([]); const [focused, setFocused] = React.useState(false);

return ( <form>

Email

<ReactMultiEmail placeholder='Input your email' emails={emails} onChange={(_emails: string[]) => { setEmails(_emails); }} autoFocus={true} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} getLabel={(email, index, removeEmail) => { return (

{email}

removeEmail(index)}> ×

); }} />

react-multi-email value

Focused: {focused ? 'true' : 'false'}

{emails.join(', ') || 'empty'}

</form> ); }

export default BasicExample; ```

Props

Property	Type	Default
id	string
emails	string[]
onChange	(emails: string[]) => void;
enable	({ emailCnt }: { emailCnt: number }) => boolean;
onDisabled	() => void;
onChangeInput	(value: string) => void;
onFocus	() => void;
onBlur	() => void;
onKeyDown	(evt: React.KeyboardEvent<HTMLInputElement>) => void;
onKeyUp	(evt: React.KeyboardEvent<HTMLInputElement>) => void;
noClass	boolean
validateEmail	(email: string) => boolean \| Promise<boolean>;
enableSpinner	boolean
style	React.CSSProperties
getLabel	( email: string, index: number, removeEmail: (index: number, isDisabled?: boolean) => void, ) => React.ReactNode;
className	string	''
inputClassName	string	''
placeholder	string \| React.ReactNode;
autoFocus	boolean;
spinner	() => React.ReactNode;
delimiter	string;	'[ ,;]'
autoComplete	string \| undefined
initialInputValue	string \| undefined	''
disableOnBlurValidation	boolean \| undefined	false
inputValue	string \| undefined	undefined

License

MIT

If you don't mind, don't forget to press "star" before leaving.

Package detail