🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A responsive & React-based auto-suggest search box for Youtube apps.

Audio_Video React

Documentation

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.

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".

www.singlepageapplication.com


You May Also Like