Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

Youtube Subscriber Count in ReactJs

In this tutorial i’m going to learn how to count YouTube Subsribers count, views count as well, as define below.

In order to install your app, first go to your workspace (desktop or a folder) and run the following command:

Go to your visual code and open terminal there as below.

npx create-react-app my-app

Next step go to your my-app

After the installation is completed, change to the directory where your app was installed:

cd my-app

and finally run npm start to see your app live on localhost:

npm start

Next First install bootstrap in react

npm install react-bootstrap bootstrap

Now simply copy and paste below code in App.js

Firs’t run below command

npm i get-youtube-channel-id
npm i react-bootstrap

and next go to App.js and simply paste below code.

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import { Button, Form } from "react-bootstrap";

const youtubeChannelId = require("get-youtube-channel-id");

export default function App() {
  const [url, setUrl] = useState(null);
  const [subscribers, setSubscribers] = useState(null);
  const [views, setViews] = useState(null);
  const [videos, setVideos] = useState(null);

  const API_KEY = "AIzaSyDmTojFDOFUpjlr6e-lnKT5sHBn5UD2bOI";

  const handleChange = (e) => {
    setUrl(e.target.value);
  };

  async function handleSubmit(e) {
    e.preventDefault();
    const result = await youtubeChannelId(url);
    console.log(result.id);

    fetch(
      `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${result.id}&key=${API_KEY}`
    )
      .then((data) => data.json())
      .then((result) => {
        console.log(result);
        setSubscribers(result.items[0].statistics.subscriberCount);
        setViews(result.items[0].statistics.viewCount);
        setVideos(result.items[0].statistics.videoCount);
      });
  }

  return (
    <div>
      <br />
      <br />
      <Container>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "12vh",
            color: "red"
          }}
        >
          <h2> Enter your channel url </h2>
        </div>
        <Form onSubmit={handleSubmit}>
          <Form.Group controlId="channelUrl">
            <Form.Label>Channel URL:</Form.Label>
            <Form.Control
              type="text"
              name="url"
              onChange={handleChange}
              value={url}
              required
              placeholder="Enter Channel URL"
            />
          </Form.Group>
          <br />
          <Button variant="primary" type="submit">
            Submit
          </Button>
          <br />
        </Form>
        You have {subscribers} subscribers
        <br />
        You have {videos} Videos
        <br />
        You have {views} Views
      </Container>
    </div>
  );
}

Run this command

npm rebuild
npm start

Now you can see your code is running well.

Next put your YouTube Channel url in input box.

Thanks please comment and like….👍👍

Hi I am Amit Kumar Thakur Experienced as s Software Developer with a demonstrated history of working in the information technology and services industry. Skilled in HTML, CSS, Bootstrap4, PHP, Laravel-9 , REST API,FB API,Google API, Youtube Api, Bitbucket,Github,Linux and jQuery. Strong engineering professional focused in Computer/Information Technology Administration and Management. Currently my profile is to Software Developer, analyze the requirement, creating frame for web application, coding and maintenance.

Related Posts

How to Crawl any website Meta Title and Meta Description in Laravel ?

1st step install below package. Next to create Controller First go to route and put below code Next go to controller and put below code Next go…

SQLSTATE[HY000] [2002] No such file or directory (Connection: mysql, SQL: insert into `oauth_clients` (`user_id`, `name`, `secret`

In this tutorial i’m going to solve the error SQLSTATE[HY000] [2002] No such file or directory (Connection: mysql, SQL: insert into oauth_clients (user_id, name, secret Error :-…

Top 20 Laravel Interview Question in 2024

In this tutorial im going share interview experience For laravel developer. A list of top frequently asked Laravel Interview Questions and answers are given below. Q #1) What is…

How to Get Google Analytics API key ?

In this tutorial we’re going to share how to get the google Analytics API key. I have shared in very easy way. First go enable Google analytics…

How to Disable Laravel’s Eloquent timestamps in laravel ?

In this tutorial we’re going to share how to disable the automatic created_at and updated_at timestamps in Laravel’s Eloquent models, along with explanations of different scenarios: 1st…

The Mix manifest does not exist.

The error message “The Mix manifest does not exist” typically occurs in Laravel applications when Laravel Mix, which is responsible for compiling assets like JavaScript and CSS,…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x