I am trying to make a youtube video downloader app using react and I have found an npm package called ytdl-core to do so, how do I use the npm package in my react app?
I created my react app with an input tag to paste the url of the video which is to be downloaded and extracted the input value and now I have to pass this url to node module
import React, {useState} from 'react'
function Input() {
const [url, setUrl] = useState("");
const downloadVideo = () => {
const downloadURL= url;
}
return (
<div className="p-4">
<h1 className="text-3xl font-bold mb-4">Youtube Video Downloader</h1>
<input
type="text"
onChange={(e) => setUrl(e.target.value)}
className="border border-gray-300 rounded px-3 py-2 w-full mb-4"
placeholder="Enter video URL"
/>
<button
onClick={() => downloadVideo()}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Download
</button>
</div>
)
}
export default Input
Kevin Anthony is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can’t. The package you found is a node.js package, i.e., it runs on the back-end, not in the browser. You can tell because of:
const fs = require('fs');
i.e., it uses the fs
(file system) package, which doesn’t work in the browser.
You’ll need to create a node.js server, have your front-end react application send that server the link you want to download, and then use the package you found in that back-end server.