{"id":14384919,"url":"https://github.com/hackingbeauty/react-youtube-autocomplete","last_synced_at":"2025-06-15T01:40:52.895Z","repository":{"id":35700930,"uuid":"39978283","full_name":"hackingbeauty/react-youtube-autocomplete","owner":"hackingbeauty","description":"A responsive \u0026 React-based auto-suggest search box for Youtube apps.","archived":false,"fork":false,"pushed_at":"2017-04-28T15:44:50.000Z","size":2530,"stargazers_count":40,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-13T12:40:40.392Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hackingbeauty.github.io/react-youtube-autocomplete/","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/hackingbeauty.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":"2015-07-31T00:22:41.000Z","updated_at":"2024-11-06T15:04:25.000Z","dependencies_parsed_at":"2022-08-17T21:55:53.207Z","dependency_job_id":null,"html_url":"https://github.com/hackingbeauty/react-youtube-autocomplete","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-youtube-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-youtube-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-youtube-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-youtube-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackingbeauty","download_url":"https://codeload.github.com/hackingbeauty/react-youtube-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230720940,"owners_count":18270481,"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-08-28T18:01:46.810Z","updated_at":"2024-12-21T13:30:24.274Z","avatar_url":"https://github.com/hackingbeauty.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-youtube-autocomplete\nA responsive React-based auto-suggest search box for Youtube apps.\n\nI like to build apps on top of Youtube.  Sometimes you need to let users search for videos on Youtube within your app.\nJust drop this component into your Youtube-friendly React.js app and you'll get a fully functional auto-suggest-enabled search box.\n\n## Demo\n\nSee this [compenent in action](http://hackingbeauty.github.io/react-youtube-autocomplete/)\n\n## Installation\n\n`npm install --save react-youtube-autocomplete`\n\n## Features\n\n- Autocomplete text entry\n- Search Youtube based on text input\n- Retrieve list of results from Youtube\n- Display drop-down list of search results\n\n## Usage\n\n```js\n\u003cYoutubeAutocomplete\n  apiKey={string}        // you must get an API key from google if you want video search results returned\n  maxResults={string}    // defaults -\u003e 50. Number of video search results you want\n  placeHolder={string}   // defaults -\u003e \"Search Youtube\"\n  callback={function}    // callback to execute when search results are retrieved\n  className={string}     // defaults -\u003e random string\n/\u003e\n```\n\n## Example\n\n```js\nimport YoutubeAutocomplete from 'react-youtube-autocomplete';\n\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cYouTubeAutocomplete\n        apiKey=\"YOUR-API-KEY-THAT-YOUR-REGISTERED-WITH-GOOGLE\"\n        placeHolder=\"Search Youtube\"\n        callback= this._onSearchResultsFound\n      /\u003e\n    );\n  }\n\n  _onSearchResultsFound(results) {\n    // Results is an array of retreived search results\n    // I use flux, so I dispatch results to an action\n    flux.actions.showSearchResults(results);\n  }\n}\n```\n\n## License\n\nMIT\n\n## Course\n\nAre you looking to build a professional app for the Web using React \u0026 Redux?\n\nCheck out my course [\"How to Write a Single Page Application\".](http://www.singlepageapplication.com)\n\nwww.singlepageapplication.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackingbeauty%2Freact-youtube-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackingbeauty%2Freact-youtube-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackingbeauty%2Freact-youtube-autocomplete/lists"}