react-multi-email
react-multi-email copied to clipboard
axisj
Support async-validate emails
Changes
- Support async-validate emails
Notes
I tested this after removing node-sass due to node-sass issue.
Please let me know if node-sass should be removed from dev-dependency.
Manual Test
Test code
// validateEmail={this.asyncTest}
asyncTest <=> async () => {
return new Promise<boolean>((resolve, reject) => {
setTimeout(() => resolve(true), 1000);
});
};
...
<ReactMultiEmail
placeholder="Input your email"
emails={emails}
onChange={(_emails: string[]) => {
this.setState({ emails: _emails });
}}
validateEmail={this.asyncTest}
getLabel={(
email: string,
index: number,
removeEmail: (index: number) => void,
) => {
return (
<div data-tag key={index}>
<div data-tag-item>{email}</div>
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>;
Result
An email was added when the validation returned true one second after entering the enter.
Great work! Thank you. but can you add a spinning state when validating emails?
Great work! Thank you. but can you add a spinning state when validating emails?
Thanks for your feedback.
I think some users may not like that the spinner is in the EmailComponent.
And some users might want to change their spinner's style.
So, I created an enableSpinner flag so that the spinner does not come out when the value is false.
I think users can use their spinner in the way below.
asyncTest = async () => {
return new Promise<boolean>((resolve, reject) => {
// Show user's spinner
this.setState({ validating: true })
setTimeout(() => {
resolve(true);
// Hide user's spinner
this.setState({ validating: false })
}, 1000);
});
};
...
<ReactMultiEmail
placeholder="Input your email"
emails={emails}
onChange={(_emails: string[]) => {
this.setState({ emails: _emails });
}}
validateEmail={this.asyncTest}
enableSpinner={false}
getLabel={(
email: string,
index: number,
removeEmail: (index: number) => void,
) => {
return (
<div data-tag key={index}>
<div data-tag-item>
{email}
</div>
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
And users who want to spinner of ReactMultiEmail,
just can write this.
<ReactMultiEmail
placeholder="Input your email"
emails={emails}
onChange={(_emails: string[]) => {
this.setState({ emails: _emails });
}}
validateEmail={this.asyncTest}
getLabel={(
email: string,
index: number,
removeEmail: (index: number) => void,
) => {
return (
<div data-tag key={index}>
<div data-tag-item>
{email}
</div>
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
The below gif is the demo using the spinner that I made.
(I didn't use react-spinner or other libs because I think we should keep no-dependency. Otherwise, just let me know).
Please let me know if spinner's design doesn't suit here or if there are other issues.
I'm not sure this repository is still managed.
So, I made a forked version of this repository.
https://www.npmjs.com/package/@jopemachine/react-multi-email
This version support below additional features
This version could be removed when the above PRs are merged or close.
@jopemachine Can you update the package to capture the onChange of the value typed in the input box?
