react-youtube-autocomplete
A responsive React-based auto-suggest search box for Youtube apps.
I like to build apps on top of Youtube. Sometimes you need to let users search for videos on Youtube within your app. Just drop this component into your Youtube-friendly React.js app and you'll get a fully functional auto-suggest-enabled search box.
GET https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=old+jewish+jokes&key={YOUR_API_KEY} GET https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=old+jewish+jokes&type=channel&key={YOUR_API_KEY}
Demo
See this compenent in action
Installation
npm install --save react-youtube-autocomplete
Features
- Autocomplete text entry
- Search Youtube based on text input
- Retrieve list of results from Youtube
- Display drop-down list of search results
Usage
<YoutubeAutocomplete
apiKey={string} // you must get an API key from google if you want video search results returned
maxResults={string} // defaults -> 50. Number of video search results you want
placeHolder={string} // defaults -> "Search Youtube"
callback={function} // callback to execute when search results are retrieved
className={string} // defaults -> random string
/>Example
import YoutubeAutocomplete from 'react-youtube-autocomplete';
class Example extends React.Component {
render() {
return (
<YouTubeAutocomplete
apiKey="YOUR-API-KEY-THAT-YOUR-REGISTERED-WITH-GOOGLE"
placeHolder="Search Youtube"
callback= this._onSearchResultsFound
/>
);
}
_onSearchResultsFound(results) {
// Results is an array of retreived search results
// I use flux, so I dispatch results to an action
flux.actions.showSearchResults(results);
}
}License
MIT
Course
Are you looking to build a professional app for the Web using React & Redux?
Check out my course "How to Write a Single Page Application".