https://github.com/hackingbeauty/react-youtube-autocomplete

A responsive & React-based auto-suggest search box for Youtube apps.
https://github.com/hackingbeauty/react-youtube-autocomplete

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hackingbeauty/react-youtube-autocomplete
• Owner: hackingbeauty
• Created: 2015-07-31T00:22:41.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-28T15:44:50.000Z (over 7 years ago)
• Last Synced: 2024-08-17T13:22:59.478Z (4 months ago)
• Language: JavaScript
• Homepage: http://hackingbeauty.github.io/react-youtube-autocomplete/
• Size: 2.41 MB
• Stars: 39
• Watchers: 2
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](http://hackingbeauty.github.io/react-youtube-autocomplete/)

## 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

```js

 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

```js

import YoutubeAutocomplete from 'react-youtube-autocomplete';

class Example extends React.Component {

  render() {

    return (

      

    );

  }

  _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".](http://www.singlepageapplication.com)

www.singlepageapplication.com