React.js Youtube Data API V3 Search Videos Autocomplete by Keyword Using Functional Components Full Example For Beginners

React.js Youtube Data API V3 Search Videos Autocomplete by Keyword Using Functional Components Full Example For Beginners

 

 

Welcome folks today in this blog post we will be building a youtube search autocomplete videos using youtube data api v3 in react.js using functional components. All the full source code of the application is given below.

 

 

Live Demo

 

 

React.js Youtube Search Videos By Keyword

 

 

Get Started

 

 

In order to get started we need to create a brand new github repository as shown below  to initialize a new react.js project

 

react-youtube-search-videos

A React implementation of youtube search videos app using youtube data api.

 

DOWNLOAD SOURCE CODE

 

And also you can clone the github repository as shown below

 

git clone https://github.com/amandeepmittal/react-youtube-search.git

 

cd react-youtube-search-videos

 

npm install

 

npm start

 

The directory structure will look like this as shown below

 

 

Now just go to https://console.developers.google.com/google developers console and create the api key for your application as shown below

 

 

Now store the above api key and just replace the api_key inside the below code

See also  React.js Youtube Data API V3 Video Search Example Using Axios Full Tutorial For Beginners (2020)

 

import debounce from 'lodash.debounce';
import React, { Component } from 'react';
import './App.css';
import SearchBar from './components/SearchBar';
import VideoDetail from './components/VideoDetail';
import VideoList from './components/VideoList';
import YTSearch from 'youtube-api-search';
import Footer from './components/Footer';

const REACT_APP_API_KEY = '#####APIKEY######';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            videos: [], // holds 5 videos fetched from API
            selectedVideo: null // selected video is null, default set below ln:28
        };

        this.videoSearch('reactjs'); // default search term
    }

    // function for search term
    videoSearch(term) {
        YTSearch(
            {
                key: REACT_APP_API_KEY,
                term: term
            },
            videos => {
                this.setState({ videos: videos, selectedVideo: videos[0] }); // through states setting the default video
            }
        );
    }

    render() {
        // for consistent ui such that it re-renders after 300ms on search
        const videoSearch = debounce(term => {
            this.videoSearch(term);
        }, 300);
        return (
            <div className="container">
                <SearchBar onSearchTermChange={videoSearch} />
                <div className="columns">
                    <VideoDetail video={this.state.selectedVideo} />
                    <VideoList
                        videos={this.state.videos}
                        onVideoSelect={selectedVideo => {
                            this.setState({ selectedVideo });
                        }}
                    />
                </div>
                <Footer/>
            </div>
        );
    }
}

export default App;

 

After this when you start the react.js application your game will start and the screenshot will look like this

See also  React.js Redux Github API Username Search With Repositories Data Using React-Router in Javascript Full Project For Beginners

 

 

Leave a Reply