{"id":16545155,"url":"https://github.com/arjayosma/react-autofill-component","last_synced_at":"2025-03-23T13:32:36.002Z","repository":{"id":123507814,"uuid":"259780217","full_name":"arjayosma/react-autofill-component","owner":"arjayosma","description":"Provides an autofill suggestion for every keystroke and can be completed by pressing tab.","archived":false,"fork":false,"pushed_at":"2024-04-23T02:14:08.000Z","size":5730,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T21:28:20.488Z","etag":null,"topics":["component","react","react-autocomplete","react-autofill","react-autosuggest"],"latest_commit_sha":null,"homepage":null,"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/arjayosma.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-29T00:03:15.000Z","updated_at":"2024-05-04T02:51:51.000Z","dependencies_parsed_at":"2024-04-28T14:13:54.039Z","dependency_job_id":null,"html_url":"https://github.com/arjayosma/react-autofill-component","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"df0cba650aa8699366fc11613432560cda46e6bb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjayosma%2Freact-autofill-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjayosma%2Freact-autofill-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjayosma%2Freact-autofill-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjayosma%2Freact-autofill-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arjayosma","download_url":"https://codeload.github.com/arjayosma/react-autofill-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245108303,"owners_count":20562021,"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":["component","react","react-autocomplete","react-autofill","react-autosuggest"],"created_at":"2024-10-11T19:05:59.655Z","updated_at":"2025-03-23T13:32:34.167Z","avatar_url":"https://github.com/arjayosma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-autofill-component\n\n![React Autofill Component Example](react-autofill-component.gif)\n\nReact Autofill Component is a bite-sized React component that provides an autofill or auto-suggestion for every keystroke and can be completed by pressing tab.\n\n[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n[![package version](https://img.shields.io/npm/v/react-autofill-component.svg?style=flat-square)](https://www.npmjs.com/package/react-autofill-component)\n[![package downloads](https://img.shields.io/npm/dm/react-autofill-component.svg?style=flat-square)](https://www.npmjs.com/package/react-autofill-component)\n[![package license](https://img.shields.io/npm/l/react-autofill-component.svg?style=flat-square)](https://www.npmjs.com/package/react-autofill-component)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![GitHub issues](https://img.shields.io/github/issues/arjayosma/react-autofill-component)](https://github.com/arjayosma/react-autofill-component/issues)\n[![GitHub forks](https://img.shields.io/github/forks/arjayosma/react-autofill-component)](https://github.com/arjayosma/react-autofill-component/network)\n[![GitHub stars](https://img.shields.io/github/stars/arjayosma/react-autofill-component)](https://github.com/arjayosma/react-autofill-component/stargazers)\n\n## Install\n\n```bash\nnpm install --save react-autofill-component\n```\n\n## Props\n\n| Prop Name       | Default Value | Description                                                                                                                |\n| --------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `autofillValue` | `''`          | The autofill placeholder value. When the tab key is pressed (if `completeOnTab` is true) the input will be auto-populated. |\n| `completeOnTab` | `true`        | Identifies whether the input text will be completed on pressing the tab key. By default, this is set to true.              |\n| `disabled`      | `false`       | Disables the input text.                                                                                                   |\n| `onChange`      | -             | Accepts a text string. `onChange(text) =\u003e console.log(text);`                                                              |\n| `placeholder`   | `''`          | Placeholder value when the autofill value is empty.                                                                        |\n| `value`         | `''`          | Text string value.                                                                                                         |\n\n## Styling Props\n\n| Prop Name            | Description                                           |\n| -------------------- | ----------------------------------------------------- |\n| `className`          | Class name styles for the input text.                 |\n| `containerClassName` | Class name styles for the input container.            |\n| `inputBgClassName`   | Class name styles for the input background container. |\n\n## Usage\n\n```jsx\nimport React, { Component, useEffect, useState } from 'react'\n\nimport MyComponent from 'react-autofill-component'\nimport 'react-autofill-component/dist/index.css'\n\nclass Example extends Component {\n  const [text, setText] = useState('')\n  const [autofill, setAutofill] = useState('')\n  const words = ['test', 'react', 'component', 'sample']\n\n  useEffect(() =\u003e {\n    const [result] = words.filter((word) =\u003e word.indexOf(text) === 0)\n    setAutofill(\n      text.length \u003e 0 \u0026\u0026 result \u0026\u0026 result.indexOf(text) === 0 ? result : ''\n    )\n  }, [text, words])\n\n  render() {\n    return \u003cMyComponent\n      autoFillValue={autofill}\n      onChange={setText}\n      placeholder=\"Input value here...\"\n      value={text}\n    /\u003e\n  }\n}\n```\n\n## Contribute\n\nIf you like this small component, feel free to create a pull request or fork the repository.\n\n1. Fork it and create your feature branch: git checkout -b my-new-feature\n2. Commit your changes: git commit -am 'Add some feature'\n3. Push to the branch: git push origin my-new-feature\n4. Submit a pull request\n\n## License\n\nMIT © [arjayosma](https://github.com/arjayosma)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjayosma%2Freact-autofill-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farjayosma%2Freact-autofill-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjayosma%2Freact-autofill-component/lists"}