https://github.com/hackingbeauty/material-ui-youtube-autocomplete

A React-based auto-complete search box for Youtube apps. Basically, it's an autocomplete+autosuggest component with the Material UI look and feel. Video search results are retrieved from Youtube's database based on user input, and provided as input to your callback.
https://github.com/hackingbeauty/material-ui-youtube-autocomplete

Last synced: 4 months ago
JSON representation

A React-based auto-complete search box for Youtube apps. Basically, it's an autocomplete+autosuggest component with the Material UI look and feel. Video search results are retrieved from Youtube's database based on user input, and provided as input to your callback.

• Host: GitHub
• URL: https://github.com/hackingbeauty/material-ui-youtube-autocomplete
• Owner: hackingbeauty
• Created: 2016-04-27T04:19:05.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-28T14:55:40.000Z (over 7 years ago)
• Last Synced: 2024-08-15T11:31:27.878Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 16.6 KB
• Stars: 26
• Watchers: 3
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# material-ui-youtube-autocomplete

A React.js Autcomplete complete component inspired by Material-UI.

## Demo

See this [compenent in action](https://videonotepad.com)

## Installation

`npm install --save material-ui-youtube-autocomplete`

## Features

- Material-UI stylized search input

- Auto-suggest drop-down as user types (suggested results come from Youtube)

- Retrieve collection of video search results from Youtube

## Usage

```js

import YoutubeAutcomplete from 'material-ui-youtube-autocomplete';

 50. Number of video search results you want

  placeHolder={string}   // defaults -> "Search Youtube"

  callback={function}    // callback to execute when search results are retrieved

/>

```

## Example

```js

import YoutubeAutocomplete from 'material-ui-youtube-autocomplete';

class Example extends React.Component {

  render() {

    return (

      

    );

  }

  _onSearchResultsFound(results) {

    // Results is an array of retreived search results from Youtube.

    // Do what you want with the results here.

  }

}

```

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