use-email-autocomplete

useEmailAutocomplete

📬 A React hook for email autocomplete inputs

npm i use-email-autocomplete

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

• Codesandbox

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,
})