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….👍👍