use-email-autocomplete

Email Autocomplete Hook

📬 A React hook for email autocomplete inputs

This should work with other libraries including material-ui. Play with it here!

Installation

yarn add use-email-autocomplete       OR     npm i use-email-autocomplete

Usage

import useEmailAutocomplete from 'use-email-autocomplete'

const App = () => {
  const { email, bind } = useEmailAutocomplete()
  
  const onSubmit = () => /* you an use `email` from above just like from `state` */
  
  return <input {...bind} />
}

Custom Autocomplete Input

export const EmailInput = ({ onChange, ...props }) => {
  const { email, onChange: handleEmailChange, bind } = useEmailAutocomplete()
  
  const handleChange = e => {
    handleEmailChange(e)
    onChange(email)
  }

  return <input {...bind} {...props} onChange={handleChange} value={email} />
}

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

  return <TextField {...bind} {...props} onChange={handleChange} value={email} />
}

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, // value with suggestion
  value, // same as email (used for binding to input)
  onChange,
  ref,
  onBlur,
  onFocus,
  isValid,
  bind, // spread this on an `input` or component and it will do the rest
} = useEmailAutocomplete({
  domains: [],
  validation: true,
})