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 = const onSubmit = /* you an use `email.address` from above just like from `state` */ return <input />
Custom Autocomplete Input
⚠️ email
cannot be destructured. It must be used like email.address
and email.isValid
⚠️
const EmailInput = onChange ...props const email onChange: handleEmailChange bind = const address isValid = email // WRONG, DO NOT DO THIS const handleChange = { if !emailisValid conosle // RIGHT // RIGHT } return <input = />
Usage with Material UI
Requires @material-ui/core: 4.0.0
and above.
import TextField from '@material-ui/core' const EmailInput = onChange ...props const email onChange: handleEmailChange bind = const handleChange = { } return <TextField = />
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} =