w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Script ReactJs

ReactJs: YouTube Instant search working with API

W3TWEAKS by W3TWEAKS
November 26, 2019
in ReactJs

This tutorial will explain how to achieve to get YouTube instant search with API using ReactJs. You can find step by step tutorial to get the output. Demo and Download are available.

DownloadDemoGitHub

You might also like

ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

September 21, 2019
My first reactJs (Hello World) Project

My first reactJs (Hello World) Project

November 26, 2019

Before going to the tutorial, we have to setup the reactJs project. Follow the link to setup the reactjs project.

Folder Structure

Once the setup done using the above link you will see the below folder structure.

After creation, your project should look like this:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Now we have to create the below listed folders inside the “src” folder.

  • components
  • css
  • fonts
  • services

Now create the below listed js files inside “components” folder

  • App.js
  • ListFilteredVideos.js
  • NextPrevious.js
  • Search.js
  • VideoListLayout.js

Now download the bootstrap dependency files from Bootstrap website and place the files to their respected folders.

Now create the below js file inside “services” folder

  • YouTubeGetData.js

Delete the below files from the “src” folder

  • App.js
  • App.css
  • index.css
  • logo.svg

Once the above steps are done, you will see the below folder structure

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
	└── components
	    └── App.js
	    └── ListFilteredVideos.js
	    └── NextPrevious.js
	    └── Search.js
	    └── VideoListLayout.js
	└── css
	    └── bootstrap.min.css
	└── fonts
	    └── glyphicons-halflings-regular.eot
	    └── glyphicons-halflings-regular.svg
	    └── glyphicons-halflings-regular.ttf
	    └── glyphicons-halflings-regular.woff
	    └── glyphicons-halflings-regular.woff2
	└── services
	    └── YouTubeGetData.js
    └── App.test.js
    └── index.js
    └── registerServiceWorker.js

Now, Let’s start writing the code.

Open the “index.js” from “src” folder and copy past the below code.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Open the “App.js” from “src/components” folder and copy past the below code.

import React from 'react';
import ListFilteredVideos from './ListFilteredVideos.js';
import Search from './Search.js';
import NextPrevious from './NextPrevious.js';
import {youtubeApiServiceCall} from './../services/YouTubeGetData.js';
import '../css/bootstrap.min.css';

export default class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
		  posts: [],
	      filterText: 'HTML Tutorials',
	      nextPageToken:'',
	      prevPageToken:'',
	      pageToken:''
	    }
	};
	tokenUpdate(token) {
		youtubeApiServiceCall(this.state.filterText, token).then((obj) => {
			this.setState({
				'posts':obj.posts,
				'nextPageToken':obj.nextPageToken,
				'prevPageToken':obj.prevPageToken
			});
		});
	};
	filterUpdate(value) {
		this.setState({
			filterText: value
		});
		youtubeApiServiceCall(this.state.filterText).then((obj) => {
			this.setState({
				'posts':obj.posts,
				'nextPageToken':obj.nextPageToken,
				'prevPageToken':obj.prevPageToken
			});
		});
	};
	componentDidMount() {
		youtubeApiServiceCall(this.state.filterText).then((obj) => {
			this.setState({
				'posts':obj.posts,
				'nextPageToken':obj.nextPageToken,
				'prevPageToken':obj.prevPageToken
			});
		});
	}
	render() {
		return (<div>
			<Search filterVal={this.state.filterText} filterUpdate={this.filterUpdate.bind(this)}></Search>
			<NextPrevious nextPageToken={this.state.nextPageToken} prevPageToken={this.state.prevPageToken} tokenUpdate={this.tokenUpdate.bind(this)}></NextPrevious>
			<ListFilteredVideos posts={this.state.posts}></ListFilteredVideos>
		</div>);
	};
};

Open the “ListFilteredVideos.js” from “src/components” folder and copy past the below code.

import React from 'react';
import VideoListLayout from './VideoListLayout.js';

export default class ListFilteredVideos extends React.Component{
	render(){
		const {posts} = this.props;
	    return (<div className="panel-body">
			{posts.map((post, i) =>
				<VideoListLayout key={i} posts={post}> </VideoListLayout>
			)}
		</div>);
	};
};

Open the “NextPrevious.js” from “src/components” folder and copy past the below code.

import React from 'react';

export default class NextPrevious extends React.Component{
	render(){
		var divStyle = {
		  	textAlign: 'center'
		};
		const { nextPageToken, prevPageToken, tokenUpdate} = this.props;
	    return (
	    	<div style={divStyle}>
			    <div className="btn-group">
				    {prevPageToken &&
					  <button type="button" id="pageTokenPrev" className="btn btn-default" onClick={() => {
					   tokenUpdate(prevPageToken)
					  }}>Prev</button>
					}
					{nextPageToken &&
						<button type="button" id="pageTokenNext" className="btn btn-default" onClick={() => {
							tokenUpdate(nextPageToken)
						}}>Next</button>
					}
			    </div>
			</div>
		);
	};
};

Open the “Search.js” from “src/components” folder and copy past the below code.

import React from 'react';

export default class Search extends React.Component {
  render() {
    const { filterVal, filterUpdate} = this.props;
    return (
      <form>
        <input
          type='text'
          ref='filterInput'
          placeholder='Type to filter..'
          // binding the input value to state
          value={filterVal}
          onChange={() => {
           filterUpdate(this.refs.filterInput.value)
          }}
        />
      </form>
    )
  }
};

Open the “VideoListLayout.js” from “src/components” folder and copy past the below code.

import React from 'react';

export default class ListFilteredVideos extends React.Component{
	render(){
		const {posts} = this.props;
		const url = 'https://www.youtube.com/watch?v='+posts.id.videoId,
			  imgUrl = posts.snippet.thumbnails.default.url,
			  title = posts.snippet.title,
			  channelTitle = posts.snippet.channelTitle,
			  channelUrl = 'https://www.youtube.com/channel/'+posts.snippet.channelId;

	    return (<div className="col-sm-4 col-lg-4 col-md-4">
	    <div className="well well-sm media">
	        <a className="thumbnail pull-left" target="_block" href={url}><img alt={title} src={imgUrl} width="120" height="90" /></a>
	        <div className="media-body">
	            <a target="_block" href={url}>{title}</a>
	            <p>By <a target="_block" href={channelUrl}><span className="label label-info">{channelTitle}</span></a></p>
	        </div>
	    </div>
	</div>);
	};
};

Open the “YouTubeGetData.js” from “src/services” folder and copy past the below code.

export function youtubeApiServiceCall(filterText, pageToken){
	let pageTokenVal = '';
  if (pageToken) {
    pageTokenVal = "&pageToken="+pageToken;
  }

	const val = filterText;
	const url = "https://www.googleapis.com/youtube/v3/search?key=YOUTUBE_API_KEY&q="+val+"&type=video&part=snippet&maxResults=12"+pageTokenVal;

    return new Promise((resolve, reject) => {
    	fetch(url, {
		    method: 'get',
		    headers: {
		        'Accept': 'application/json'
		    }
		}).then(function(res) {
			return res.json();
		}).then(function (data) {
	        const posts = data.items.map(obj => obj);
	        const{nextPageToken,prevPageToken} = data;
	        const objects = {
	        	'posts':posts,
	        	'nextPageToken':nextPageToken,
	        	'prevPageToken':prevPageToken
	        };
	    	resolve(objects);
	    });
    });
};

Note: Replace “YOUTUBE_API_KEY” with your youtube API key

Alright… Every thing is done!!!

Now, Time to run the code and see the output

Open the terminal and cd to the project folder like below video

// To run the project
npm start
// To take a build
npm run build

Tags: APIinstantReactJSsearchtutorialYouTubeyoutube apiyoutube instant search
Previous Post

ReactJs: Eacy to setup and install (create-react-app)

Next Post

Login the App using facebook oauth in PHP

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

by W3TWEAKS
September 21, 2019

In My previous reactjs tutorials, you can find the reactjs setups are done manually. We have to install the packages...

My first reactJs (Hello World) Project

My first reactJs (Hello World) Project

by W3TWEAKS
November 26, 2019

Let’s write our first React Component. In my previous tutorial I have explained, how to install and setup the reactJs...

ReactJs: Installation and Setup the Development Environment

ReactJs: Installation and Setup the Development Environment

by W3TWEAKS
September 21, 2019

Facebook ReactJs is a powerful framework to develop the single page applications. Tutorial will explain you how to install and...

Next Post
Login the App using facebook oauth in PHP

Login the App using facebook oauth in PHP

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools