https://github.com/ava/use-email-autocomplete

📬 React hook for email autocomplete inputs
https://github.com/ava/use-email-autocomplete

Last synced: 6 days ago
JSON representation

📬 React hook for email autocomplete inputs

• Host: GitHub
• URL: https://github.com/ava/use-email-autocomplete
• Owner: ava
• License: mit
• Created: 2019-02-21T05:19:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-05T00:17:05.000Z (almost 5 years ago)
• Last Synced: 2024-08-08T02:13:05.675Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 229 KB
• Stars: 37
• Watchers: 2
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



    
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](https://alex-cory.github.io/email-autocomplete-input/)!



Usage

-----

⚠️ `email` cannot be destructured. It must be used like `email.address` and `email.isValid` ⚠️

```jsx

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 

}

```

Custom Autocomplete Input

-------------------------

⚠️ `email` cannot be destructured. It must be used like `email.address` and `email.isValid` ⚠️

```jsx

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 

}

```

Usage with Material UI

----------------------

Requires `@material-ui/core: 4.0.0` and above.

```jsx

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 

}

```

### Examples

- [Codesandbox](https://codesandbox.io/s/useemailautocomplete-material-ui-j5m1x)

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

```js

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,

})

```