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) => {

async function handleSubmit(e) {
const result = await youtubeChannelId(url);

.then((data) => data.json())
.then((result) => {

return (
<br />
<br />
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "12vh",
color: "red"
<h2> Enter your channel url </h2>
<Form onSubmit={handleSubmit}>
<Form.Group controlId="channelUrl">
<Form.Label>Channel URL:</Form.Label>
placeholder="Enter Channel URL"
<br />
<Button variant="primary" type="submit">
<br />
You have {subscribers} subscribers
<br />
You have {videos} Videos
<br />
You have {views} Views

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 Experienced Web Developer with a demonstrated history of working in the information technology and services industry.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing a Component in Vue.js

Opening External Links in Browser in React Native WebView

Choosing a right Mobile platform for your business ?

Speech text Reader with Javascript

Angular Material — Part 3: Navigation (Menus, Sidenavs and Toolbars)

Webpack Essentials — Updated for 2020

🔥🔥🔥 ReactPakistan EcoSystem — Build Web/Mobile UI with React Micro-Frontend 🔥🔥🔥

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amit Kumar

Amit Kumar

Hi I am Amit Experienced Web Developer with a demonstrated history of working in the information technology and services industry.

More from Medium

Why it is important to redirect HTTP website to HTTPS and How?

Working with Github submodules

Building a Restaurant Picker Program Using Google Places API

Let’s create a Browser Extension ( with source code )