{"id":19451386,"url":"https://github.com/yazaabed/react-autocomplete","last_synced_at":"2025-04-25T04:30:25.498Z","repository":{"id":55394551,"uuid":"151554548","full_name":"yazaabed/react-autocomplete","owner":"yazaabed","description":"This autocomplete component built to show what render props pattern can do with react and how much it flexible","archived":false,"fork":false,"pushed_at":"2021-01-03T10:55:51.000Z","size":214,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T11:55:58.161Z","etag":null,"topics":["autocomplete","components","react","reactjs","reactjs-components","render-props","state-management"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/n7n10j53pl","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yazaabed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-04T10:27:45.000Z","updated_at":"2023-12-01T07:44:39.000Z","dependencies_parsed_at":"2022-08-14T23:20:24.222Z","dependency_job_id":null,"html_url":"https://github.com/yazaabed/react-autocomplete","commit_stats":null,"previous_names":["yazanaabeed/react-autocomplete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Freact-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yazaabed","download_url":"https://codeload.github.com/yazaabed/react-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754509,"owners_count":21481825,"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":["autocomplete","components","react","reactjs","reactjs-components","render-props","state-management"],"created_at":"2024-11-10T16:41:29.902Z","updated_at":"2025-04-25T04:30:25.254Z","avatar_url":"https://github.com/yazaabed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Autocomplete\nThis autocomplete component built to show what render props pattern can do with react and how much it flexible.\n\n## Introduction\n- An autocomplete react component to allow user to build dynamic dropdown or searchable items.\n- This component is for learning how render-props pattern word in react-js.\n- For production matter you can use [\"Downshift\" component from paypal](https://github.com/paypal/downshift).\n\n### Examples\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Autocomplete } from \"@yazanaabed/react-autocomplete\";\nimport styles from \"./styles\";\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showDropdown: true,\n      items: [\n        {\n          username: \"User1\",\n          id: 1\n        },\n        {\n          username: \"User2\",\n          id: 2\n        }\n      ],\n      selectedItem: []\n    };\n  }\n\n  filterItemsBySearchInput = inputValue =\u003e {\n    return this.state.items.filter(\n      item =\u003e\n        !inputValue ||\n        item.username.toLowerCase().includes(inputValue.toLowerCase())\n    );\n  };\n\n  onSelectedItemChanged = selection =\u003e {\n    this.setState(prevState =\u003e {\n      console.log(prevState, selection);\n\n      let selectedItem = [...prevState.selectedItem];\n      let isItemFound = selectedItem.find(item =\u003e item.id === selection.id);\n\n      if (!isItemFound) {\n        selectedItem.push(selection);\n      }\n\n      return {\n        selectedItem\n      };\n    });\n  };\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cAutocomplete\n          onChange={selection =\u003e this.onSelectedItemChanged(selection)}\n        \u003e\n          {({\n              getContainerProps,\n              getItemProps,\n              getInputProps,\n              getMenuProps,\n              inputValue,\n              isOpen,\n              highlightedIndex\n            }) =\u003e {\n            let itemsFiltered = this.filterItemsBySearchInput(inputValue);\n\n            return (\n              \u003cdiv\n                {...getContainerProps({ className: styles.dropdownContainer })}\n              \u003e\n                \u003cinput\n                  type=\"text\"\n                  {...getInputProps({\n                    className: styles.dropdownInput\n                  })}\n                /\u003e\n\n                {isOpen ? (\n                  \u003cul {...getMenuProps({ className: styles.menuDropdown })}\u003e\n                    {itemsFiltered.map((item, index) =\u003e (\n                      \u003cli {...getItemProps({ item, index })}\u003e\n                        \u003cdiv\n                          className={styles.dropdownItem}\n                          style={{\n                            backgroundColor:\n                              highlightedIndex === index ? \"#e0f4ea\" : \"\"\n                          }}\n                        \u003e\n                          {index}\n                          {item.username}\n                        \u003c/div\u003e\n                      \u003c/li\u003e\n                    ))}\n\n                    {!itemsFiltered.length ? (\n                      \u003cli className={styles.noItemsFound}\u003e\n                        \u003ch1 className={styles.notFoundTitle}\u003eNot found.\u003c/h1\u003e\n                      \u003c/li\u003e\n                    ) : null}\n                  \u003c/ul\u003e\n                ) : null}\n              \u003c/div\u003e\n            );\n          }}\n        \u003c/Autocomplete\u003e\n\n        \u003ch1 className={styles.title}\u003eHere is the active items\u003c/h1\u003e\n        \u003cul\u003e\n          {this.state.selectedItem.map((item, index) =\u003e (\n            \u003cli key={index}\u003e{item.username}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).\n\n## Authors\n\n* **Yazan Aabed**\n* See also the list of [contributors](https://github.com/YazanAabeed/react-autocomplete/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Acknowledgments\n\n* This component to learn more about react-js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Freact-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyazaabed%2Freact-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Freact-autocomplete/lists"}