As I mentioned in part I, the auto-complete search box is designed for apps that need to search Youtube. Therefore, the component is of limited use; however, it’s simple enough to demo and explain a core concept: how to reuse other libraries in order to build something new.

In this second post, I’m going to demonstrate the last part: how the component retrieves video search results from Youtube’s API after a user selects a suggested term, and a few details regarding the public-facing API for the component.

When a user selects a term and hits enter, the component simply displays an alert.

This works great when a user hits the enter key. But when a user clicks or taps a term, the search term doesn’t get selected. This needs to be fixed.

React-Tap-Event-Plugin

Mobile browsers have a built-in 300ms delay between a user tapping an item and a mobile browser considering it a click.

This delay was implemented because many sites are still not mobile-optimized, and users double-tap on items to zoom in and expand them. Therefore, mobile browsers need to determine if a user intended a double-tap, hence the delay.

React hasn’t decided how to effectively deal with this, and its built-in onClick attribute falls prey to this delay.

Furthermore, Material-UI components actually rely on a module called react-tap-event-plugin, so you need to apply it in order to get things to work correctly.

After the addition of the code below (lines 6 and 8), tapping or clicking a search term will work.

Youtube-Finder requires that you instantiate it by providing the API key that you registered with Youtube. A registered API key will be required for any developer that makes use of this component and requires search results to be fetched.

In the constructor on line 6, I call YoutubeFinder.createClient and pass in the apiKey which is passed in as a prop.

After you’ve completed any component that you’ve developed, the last step is to package it and publish it on NPM. There are great tools to help you do this, and I walk you through them in my guide.

Seriously, sharing is one of the best parts of software development. Don’t miss out!

Conclusion

I hope that you gained some new insight by reading this blog series.

As a Developer who has worked on the Web for a while, I believe that the “thinking in components” approach to developing and architecting large-scale web apps holds a lot of promise.

In this series, the main point I’m trying to convey to other Front-End Engineers is that building advanced UI functionality doesn’t always require doing everything from scratch.

Developing UI components is akin to using lego blocks in order to build functionality nobody has created before.

Furthermore, you don’t always have to build apps and full-fledged prototypes to gain practice and expand your portfolio. Creating and sharing a cool component that others can use is a great way to get your name out there.