use-email-autocomplete
v1.0.7
Published
📭 React hook for email autocomplete inputs
Downloads
304
Maintainers
Readme
This should work with other libraries including material-ui
.
Play with it here!
Usage
⚠️ 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} />
}
Custom Autocomplete Input
⚠️ 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} />
}
Usage with Material UI
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} />
}
Examples
Options
| 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. |
Option Usage
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,
})