π¬ A React hook for email autocomplete inputs
npm i use-email-autocomplete
undefined Known Vulnerabilities Known Vulnerabilities
This should work with other libraries including material-ui.
Play with it here!
email cannot be destructured. It must be used like email.address and email.isValid
import useEmailAutocomplete from 'use-email-autocomplete' const App = () => { const { email, bind } = useEmailAutocomplete() const onSubmit = () => /* you an use `email.address` from above just like from `state` */ return <input {...bind} /> }
email cannot be destructured. It must be used like email.address and email.isValid
export const EmailInput = ({ onChange, ...props }) => { const { email, onChange: handleEmailChange, bind } = useEmailAutocomplete() const { address, isValid } = email // WRONG, DO NOT DO THIS const handleChange = e => { handleEmailChange(e) if (!email.isValid) conosle.log('Email is not valid') // RIGHT onChange(email.address) // RIGHT } return <input {...bind} {...props} onChange={handleChange} /> }
Requires @material-ui/core: 4.0.0 and above.
import { TextField } from '@material-ui/core' export const EmailInput = ({ onChange, ...props }) => { const { email, onChange: handleEmailChange, bind } = useEmailAutocomplete() const handleChange = e => { handleEmailChange(e) onChange(email.address) } return <TextField {...bind} {...props} onChange={handleChange} /> }
| Option | Description |
|---|---|
validation |
If you don't want to validate, set this to false. Default is true |
domains |
All email domains you want to autocomplete for. Defaults to a predefined array of email domains. |
const { // `email` is the `value` + `auto suggestion` email: { address, isValid }, // spread `bind` on an `input` or component and it will // apply all html valid attributes bind, // everything within `bind` is below. `bind.value` through `bind.onFocus` value, onChange, ref, onBlur, onFocus, } = useEmailAutocomplete({ domains: [], validation: true, })