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

www.singlepageapplication.com