A Youtube search function clone project built with
React-Infinite-Scroller. Users can search for videos on Youtube through
Youtube-Data-API V3 with a quota of 100 times a day. The main takeaway from this project is how to implement infinite scroll in react. In this project, we achieve infinite scrolling by combining
react-infinite-scroller with our custom hook
useQuery to load more videos with the
nextPageToken obtained from the previous api call.
DEMO SITE ❤️ https://windsuzu.github.io/youtube-search-clone
npx create-react-app youtube-search-clone --template typescript
- TailwindCSS v3.0.24
- SASS & heroicons
npm install sass @heroicons/react
npm install react-router-dom
- React-Infinite-Scroller & tailwind-scrollbar-hide
npm install react-infinite-scroller npm i --save-dev @types/react-infinite-scroller npm install tailwind-scrollbar-hide
- Create Youtube UI (as similar as possible)
- Handle search query (use react-router-dom@v6)
- Fetch search result from Youtube Data API (also get nextPageToken)
- Load data with 4 videos each page (implement with Infinite Scroll)
- Header (fixed)
- Logo / Searchbar / Profile
- Search Results (Video)
I have come up of 4 different ways to implement search and fetch, and I chose
react-router as my approach.
- State lifting
- @reduxjs/toolkit + react-redux
The query will be displayed in the address bar like
https://localhost?query=XXX, and the
<Results> component will detect the change in
useLocation() and start fetching new query results.
This approach has some advantages. First, we don’t need to handle the query in any kind of state. Secondly, we can easily search for videos from URLs.
Fetch Results (with Infinite Scroll)
After we extract the
useLocation(), we can use [Youtube Data API – search: list] to start our search. There are two scenarios we will fetch the API:
useEffect()detects the change of query from
useLocation(), it will reset the result and get the new result if the old query result already exists.
- When we scroll to the bottom of the page, we will use
nextPageTokento query new results and append to the existing ones. We use React-Infinite-Scroller to implement scroll detection.
There are 3 data handling functions (i.e.
clear data) encapsulated in our custom hook
useQuery. The UI component
<Results> only needs to check the query, change the query, and detect scrolling to the bottom. The implementation of loading and updating the data is left to