{"id":13450908,"url":"https://github.com/ava/use-email-autocomplete","last_synced_at":"2025-04-26T02:32:02.877Z","repository":{"id":77770084,"uuid":"171805149","full_name":"ava/use-email-autocomplete","owner":"ava","description":"📬 React hook for email autocomplete inputs","archived":false,"fork":false,"pushed_at":"2019-12-05T00:17:05.000Z","size":234,"stargazers_count":37,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T21:43:44.616Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ava.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-21T05:19:32.000Z","updated_at":"2025-02-11T15:50:54.000Z","dependencies_parsed_at":"2023-04-12T05:45:52.448Z","dependency_job_id":null,"html_url":"https://github.com/ava/use-email-autocomplete","commit_stats":null,"previous_names":["alex-cory/use-email-autocomplete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ava%2Fuse-email-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ava%2Fuse-email-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ava%2Fuse-email-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ava%2Fuse-email-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ava","download_url":"https://codeload.github.com/ava/use-email-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250922127,"owners_count":21508279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:00:40.083Z","updated_at":"2025-04-26T02:32:02.622Z","avatar_url":"https://github.com/ava.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n    \u003ch1 align=\"center\"\u003euseEmailAutocomplete\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e📬 A React hook for email autocomplete inputs\u003c/p\u003e\n\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003cpre\u003enpm i \u003ca href=\"https://www.npmjs.com/package/use-email-autocomplete\"\u003euse-email-autocomplete\u003c/a\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/alex-cory/use-email-autocomplete/pulls\"\u003e\n      \u003cimg src=\"https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-email-autocomplete\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dt/use-email-autocomplete.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://lgtm.com/projects/g/alex-cory/use-email-autocomplete/context:javascript\"\u003e\n      \u003cimg src=\"https://img.shields.io/lgtm/grade/javascript/g/alex-cory/use-email-autocomplete.svg?logo=lgtm\u0026logoWidth=18\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=use-email-autocomplete\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/bundlephobia/minzip/use-email-autocomplete.svg\"\u003e\n    \u003c/a\u003e\n\u003c!--     \u003ca href=\"https://greenkeeper.io/\"\u003e\n      \u003cimg src=\"https://badges.greenkeeper.io/alex-cory/use-email-autocomplete.svg\"\u003e\n    \u003c/a\u003e --\u003e\n\u003c!--     \u003ca href=\"https://github.com/alex-cory/use-email-autocomplete/blob/master/license.md\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/github/license/alex-cory/use-email-autocomplete.svg\"\u003e\n    \u003c/a\u003e --\u003e\n    \u003ca href=\"https://codeclimate.com/github/alex-cory/use-email-autocomplete/maintainability\"\u003e\n      \u003cimg src=\"https://api.codeclimate.com/v1/badges/e661bf6aa5e4d64502c6/maintainability\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://snyk.io/test/github/alex-cory/use-email-autocomplete?targetFile=package.json\"\u003e\n      \u003cimg src=\"https://snyk.io/test/github/alex-cory/use-email-autocomplete/badge.svg?targetFile=package.json\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-email-autocomplete?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-email-autocomplete\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/use-email-autocomplete.svg\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-email-autocomplete?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n\u003c!--     \u003ca href=\"https://circleci.com/gh/alex-cory/use-email-autocomplete\"\u003e\n      \u003cimg src=\"https://img.shields.io/circleci/project/github/alex-cory/use-email-autocomplete/master.svg\" /\u003e\n    \u003c/a\u003e --\u003e\n\u003c/p\u003e\n\nThis should work with other libraries including `material-ui`.\nPlay with it [here](https://alex-cory.github.io/email-autocomplete-input/)!\n\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://github.com/alex-cory/email-autocomplete-input/blob/master/public/email-autocomplete-input-validation.gif?raw=true\" width=\"100%\"\u003e\u003c/a\u003e\n\nUsage\n-----\n\n⚠️ `email` cannot be destructured. It must be used like `email.address` and `email.isValid` ⚠️\n\n```jsx\nimport useEmailAutocomplete from 'use-email-autocomplete'\n\nconst App = () =\u003e {\n  const { email, bind } = useEmailAutocomplete()\n  \n  const onSubmit = () =\u003e /* you an use `email.address` from above just like from `state` */\n  \n  return \u003cinput {...bind} /\u003e\n}\n```\n\nCustom Autocomplete Input\n-------------------------\n\n⚠️ `email` cannot be destructured. It must be used like `email.address` and `email.isValid` ⚠️\n\n```jsx\nexport const EmailInput = ({ onChange, ...props }) =\u003e {\n  const { email, onChange: handleEmailChange, bind } = useEmailAutocomplete()\n  const { address, isValid } = email // WRONG, DO NOT DO THIS\n  \n  const handleChange = e =\u003e {\n    handleEmailChange(e)\n    if (!email.isValid) conosle.log('Email is not valid') // RIGHT\n    onChange(email.address) // RIGHT\n  }\n\n  return \u003cinput {...bind} {...props} onChange={handleChange} /\u003e\n}\n```\n\nUsage with Material UI\n----------------------\n\nRequires `@material-ui/core: 4.0.0` and above.\n\n```jsx\nimport { TextField } from '@material-ui/core'\n\nexport const EmailInput = ({ onChange, ...props }) =\u003e {\n  const { email, onChange: handleEmailChange, bind } = useEmailAutocomplete()\n  \n  const handleChange = e =\u003e {\n    handleEmailChange(e)\n    onChange(email.address)\n  }\n\n  return \u003cTextField {...bind} {...props} onChange={handleChange} /\u003e\n}\n```\n\n### Examples\n\n- [Codesandbox](https://codesandbox.io/s/useemailautocomplete-material-ui-j5m1x)\n\nOptions\n-------\n\n| Option                | Description                                                                              |\n| --------------------- | ---------------------------------------------------------------------------------------- |\n| `validation`   | If you don't want to validate, set this to false. Default is `true`    |\n| `domains` | All email domains you want to autocomplete for. Defaults to a predefined array of email domains. |\n\n### Option Usage\n\n```js\n\nconst {\n  // `email` is the `value` + `auto suggestion`\n  email: { address, isValid },\n  // spread `bind` on an `input` or component and it will\n  // apply all html valid attributes\n  bind,\n  // everything within `bind` is below. `bind.value` through `bind.onFocus`\n  value,\n  onChange,\n  ref,\n  onBlur,\n  onFocus,\n} = useEmailAutocomplete({\n  domains: [],\n  validation: true,\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fava%2Fuse-email-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fava%2Fuse-email-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fava%2Fuse-email-autocomplete/lists"}