{"id":24568854,"url":"https://github.com/aeon0/reactahead","last_synced_at":"2025-04-22T17:23:11.576Z","repository":{"id":42118813,"uuid":"105883332","full_name":"aeon0/reactahead","owner":"aeon0","description":"A lightweight and powerful typeahead component for react.js","archived":false,"fork":false,"pushed_at":"2023-03-01T12:11:02.000Z","size":1812,"stargazers_count":6,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-01T13:48:01.776Z","etag":null,"topics":["autocomplete","react","typeahead-component"],"latest_commit_sha":null,"homepage":"https://j-o-d-o.github.io/reactahead/","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/aeon0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-05T11:44:28.000Z","updated_at":"2024-02-20T13:03:47.000Z","dependencies_parsed_at":"2023-02-09T11:01:29.057Z","dependency_job_id":null,"html_url":"https://github.com/aeon0/reactahead","commit_stats":null,"previous_names":["j-o-d-o/reactahead"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeon0%2Freactahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeon0%2Freactahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeon0%2Freactahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeon0%2Freactahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeon0","download_url":"https://codeload.github.com/aeon0/reactahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235300320,"owners_count":18967738,"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","react","typeahead-component"],"created_at":"2025-01-23T14:55:34.262Z","updated_at":"2025-01-23T14:55:35.042Z","avatar_url":"https://github.com/aeon0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reactahead\n\n[![Build Status](https://travis-ci.org/UdiliaInc/create-react-library.svg?branch=master)](https://travis-ci.org/UdiliaInc/create-react-library)\n[![Dependencies](https://img.shields.io/david/udiliaInc/create-react-library.svg)]()\n[![Dev Dependencies](https://img.shields.io/david/dev/udiliaInc/create-react-library.svg)]()\n\n![Alt Text](./images/example.gif)\n\nA lightweight yet powerful typeahead component for react.js to search through data. Key features include: \n- no npm dependencies\n- highlighting matching word for the suggestions\n- async loading of data with a variable threshold  \n- support for multiple groups\n- tab through suggestions and submit with enter\n- easy to use and still flexible\n\nCheck out a Demo here: https://j-o-d-o.github.io/reactahead\n\n## Install\nInstall with npm: \n```\n\u003e\u003e npm install reactahead\n```\nThen include in your react app\n```javscript\nimport Reactahead from reactahead;\n```\n\nIf you want to use the code as base for your own typeahead component, feel free to copy the code from /src/lib/component/Reactahead.js \u0026 Reactahead.scss into your own react app. Happy coding :)\n\n## Dependencies\nThere are no module dependencies. But for the search and cancel icon, the google material icons (https://material.io/icons/) must be included like this to the index.html:\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n  ...\n```\n\n## Examples\n### Basic\n```javascript\n\u003cReactahead\n    suggestions={[\"Berlin\", \"Paris\", \"London\", \"New York\"]}\n\u003e\u003c/Reactahead\u003e\n```\n### Groups\n```javascript\n\u003cReactahead\n    suggestions={{\n        \"City\": [\"Berlin\", \"Paris\", \"London\", \"New York\"],\n        \"Country\": [\"USA\", \"England\", \"Germany\", \"Paris\", \"Spain\"]\n    }}\n\u003e\u003c/Reactahead\u003e\n```\n### Passing Objects\n`value` will be used to search against the users input and will show in the suggestions\n```javascript\n\u003cReactahead\n    suggestions={[\n        { value: \"Berlin (Germany)\", original: { name: \"Berlin\", population: 3470000 } },\n        { value: \"New York (USA)\", original: { name: \"New York\", population: 8538000 } },\n        { value: \"Rome (Italy)\", original: { name: \"Rom\", population: 2868000 } },\n        { value: \"Regensburg (Germany)\", original: { name: \"Regensburg\", population: 142292 } }\n    ]}\n\u003e\u003c/Reactahead\u003e\n```\n\n### Async\nOften the data is fetched from an API in a totally different structure. The developer must bring the data in the desired structure. Here is an example:\n\n\n```javascript\n// Passing as array\nclass App extends React.Component {\n\n    onSubmit(originalObj, info){\n    }\n\n    asyncRequest(searchValue) {\n        // 'searchValue' contains the user input in the search box\n        return API.getSuggestions(searchValue).then((res) =\u003e {\n            let returnValue = [];\n            for (var i = 0; i \u003c res.length; i++) {\n                returnValue.push(res[i].name.en);\n            }\n            return returnValue;\n        });\n    }\n\n    render() {\n        return (\n            \u003cReactahead\n                onSubmit={this.onSubmit}\n                asyncLoadingFuncs={this.asyncRequest}\n            \u003e\u003c/Reactahead\u003e\n        );\n    }\n}\n\nexport default App\n```\n\n```javascript\n// Passing as Object and as group\nclass App extends React.Component {\n\n    onSubmit(originalObj, info){\n    }\n\n    asyncRequest(searchValue) {\n        // 'searchValue' contains the user input in the search box\n        return API.getSuggestions(searchValue).then((res) =\u003e {\n            // e.g. res has this format: [{ name: { en: STRING }, population: NUMBER }, ...]\n            // returnValue must have this structure: [{value: STRING, original: ANY}, ...]\n            let returnValue = [];\n            for (var i = 0; i \u003c res.length; i++) {\n                returnValue.push({\n                    value: res[i].name.en + \" (\" + res[i].population \")\",\n                    original: res.json[i]\n                });\n            }\n            return returnValue;\n        });\n    }\n\n    render() {\n        return (\n            \u003cReactahead\n                onSubmit={this.onSubmit}\n                asyncLoadingFuncs={{\n                    \"Group Async\": this.asyncRequest\n                }}\n            \u003e\u003c/Reactahead\u003e\n        );\n    }\n}\n\nexport default App\n```\n## API\nMethod | Description\n--- | ---\n`clearInput()` | Clear the user input and close the suggestions\n\nTo access the api use the api prop:\n```javascript\nsubmit(org, info){\n    // Close suggestions\n    this.my_reactahead.clearInput()\n}\nrender() {\n    return (\n        \u003cReactahead \n            onSubmit={this.submit} \n            api={api =\u003e this.my_reactahead = api} ...\u003e\n        \u003c/Reactahead\u003e\n    );\n}\n```\n\n## Callbacks\n\n| Property        | Description  |\n| ------------- |:-------------| \n| onChange: Function     | Callback for change events. Passes through the input event for onChange. | \n| onSubmit: Function     | Callback for submit events. Submit events are fired if the user submits the input form.       |  \n| onCancel: Function | Callback for the cancel event which occurs if the user presses the cancel/close button 'X'. Or clears the input via the api.      | \n\n#### Examples\n\n```javascript\nmyChangeCb(evt){\n}\nrender() {\n    return (\n         \u003cReactahead onChange={this.myChangeCb} ...\u003e\u003c/Reactahead\u003e\n    );\n}\n```\n\nonSubmit gets triggered by these events: \n- pressing Enter while focusing the input field\n- pressing Enter while focusing one of the suggestions\n- clicking on one of the suggestions\n- clicking on the search button. \n\nThe values that are passed to the callback are the original object and an info object. The info object contains these values: \n```javascript\n{ \n    isSuggestion: BOOLEAN,  // True when user clicked on suggestion or focused suggestion while pressing enter\n    valueRaw: STRING,       // The search value the user has typed into the search field\n    groupName: STRING,      // Group which the suggestion is part of (undefined if it is not a suggestion)\n    suggestions: []         // contains all suggestions for the current searchValue\n}\n```\n```javascript\nmySubmitCb(original, info){\n}\nrender() {\n    return (\n         \u003cReactahead onSubmit={this.mySubmitCb} ...\u003e\u003c/Reactahead\u003e\n    );\n}\n```\n```javascript\nmyCancelCb(){\n}\nrender() {\n    return (\n         \u003cReactahead ref=\"reactahead\" onCancel={this.myCancelCb} ...\u003e\u003c/Reactahead\u003e\n    );\n}\n```\n\n## Propertys\n\n| Tables        | Are           |\n| ------------- |:-------------| \n| threshold: int    | How long should the asyncRequest wait until it loads new data (in ms). That way the server is not being spamed after each keystroke. Default = 200 | \n| placeholder: string | Determines the placeholder for the input field. Default = \"Search\" |\n| showGroupNames: boolean | Determines weather the suggestions groups should be shown or not. If there are no results for the group it is not shown regardless. Default = false |\n| showNoResults: boolean | Flag to deterimne weather to show a \"no result\" suggestion if no suggestion matches the user input |\n| noResultMsg: string | String that shows if showNoResults = true, Default = \"No Results found\" |\n| sendFirstSuggestionFlag: boolean | If it is set to true and the user is presses the search button or enter while focusing the search field, the first suggestion will be sent via the submit callback. On false the 1. argument of onSubmit will be null and all the suggestions will be in info[\"suggestions\"]. Default = true |\n| maxSuggestions: int | Max amount of suggestions shown per group. Default = 20 |\n| suggestions: array[any] -or- object | Data for suggestions (check out the examples for more info) |\n| asyncLoadingFuncs: Function -or- object | The functions to load data e.g. from an API. (check out the examples for more infos) |\n| ...rest | All other properties are passed to the outer reactahead component div e.g. id, className, style, ... |\n\n\n## Bugs / Feature Requests / Contribution\nFeel free to file bug reports or feature requests via the issue tracker or contribute via pull requests. \nTo run the demo locally run:\n```\n\u003e\u003e npm run start\n```\nTo build the module:\n```\n\u003e\u003e npm run build\n```\nTo build the public github page:\n```\n\u003e\u003e npm run set-node-env\n\u003e\u003e npm run build-demo\n```\n\n## Roadmap\n- Search also the groups, so if there is a group = \"continents\" display all continents if user types \"continent\"\n- Implement fuzzy search where not every character must be the same. E.g. display \"Apple\" even if user writes \"Aple\"\n- Support icons infront of suggestions\n- Fully customizable suggestion styles\n- Flag to just always show all provided suggestions (and async suggestions). This is usefull if the developer does not want to use the reactahead search algorithm but his or her own. \n\n\u003c/br\u003e\u003c/br\u003e\nThis npm module is built with \"Create-React-Library\" (https://github.com/UdiliaInc/create-react-library)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeon0%2Freactahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeon0%2Freactahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeon0%2Freactahead/lists"}