Create a React.js Auto-complete Component With Material-UI in < 100 Lines of Code - Intro

May 5, 2016

I want to show you how to do something really cool. I want to show you how to create a UI component in less than 100 lines of code that you can publish on NPM.

I’m talking about something you could potentially write in 1 or 2 hours and immediately publish to the world.

If you’re a new developer, or a seasoned developer, publishing your own open-source code is a great way to share your work. It’s also potentially a great way to get your name out there and build a portfolio.

The world of open-source software is based upon the principle of building software on top of the work of others, and ultimately ensuring (if possible) that a piece of functionality is never written twice. Hackers refer to this principle as The Unix Philosophy, or The Unix Way, where modularity, simplicity, and composition reign supreme.

So what will I show you how to build?

An Autocomplete Component for Youtube

Personally, I like writing apps that are built on top of the Youtube API. Recently, I prototyped a web application that allows users to take time-stamped notes while watching video. One of the key features I needed was a way to allow users to search Youtube’s databases in order to find relevant videos.

So I developed, and published, an autocomplete component that provides auto-suggest capabilities as a user types, and also provides video search results after a user selects a search term.

This is what the component looks like, and I wrote it in less than 100 lines of code:

Autocomplete Component

You can install the component from NPM and use it in your own Youtube-based application. For now, the component is named material-ui-youtube-autcomplete which admittedly is not the best name, but it will suffice for now.

Material-UI for React

In addition to using React.js to develop my UI components, I also like using pre-made components based on Material-UI, a design system developed by top designers at Google.

Material-UI is something you should know about if you’re a developer who finds design challenging. It’s kind of like Bootstrap in that it allows you to skin your application easily, but it’s way more powerful than that.

Material-UI for React gives you a collection of components that you can use to build any application. Components such as buttons, progress bars, date pickers, modals, icons, tabs, etc. Used in conjunction with React’s declarative style of writing UI components, you can get bootstrapped with a fully functional prototype in no time.

Building On Top of the Work of Others

You don’t always have to write things from scratch. If you like a piece of code that has been open-sourced, but you need it tweaked to solve a particular problem, you can simply use it and repurpose it.

That’s what I did with material-ui-youtube-autcomplete. I repurposed the Auto complete component from Material-UI and fed it my own data source from Youtube’s servers (which I will demonstate to you).

The Component in Action

To see a demo of the component I’m going to show you how to develop, go to my prototype In the upper left-hand corner you’ll see a search box. Search for a topic you’re interested in learning more about.

Autocomplete React.js Component - Inactive state

Notice that as you type into the search box, a drop-down list of auto-suggested terms is provided from Google. I didn’t have to code this part myself, but I did have to tweak the data-source this component relies upon.

Autocomplete React.js Component - Drop-down menu state

When you select a suggested result, the data results for your selected search term will be retrieved from Youtube’s databases.

Autocomplete React.js Component - Search results

With this component (that I wrote in less than 100 lines of code) you get a lot right out of the box. It gives you:

  • A pre-stylized search box (with a nice interaction)
  • Auto-suggest capabilities as a user types
  • Actual data from Youtube based on what the user selects

First Video in Series

I’m producing a series of videos to show you how I developed my own UI component from scratch in less than 100 lines of code. My first video is an introduction. I’ll get into the meat of the component in the subsequent videos.

As always, I love getting feedback from the community and I want to learn more about what you find useful or challenging. Please don’t hesitate to reach out directly!

Download the first video in the series: Video 1 - Introduction to creating your own UI component

Source code for the component can be found here.

Learn How To Develop Professional React Apps

Professional React App brand image

React, Redux & Webpack are HOT HOT skills that are IN DEMAND.

Do you have what it takes to be a professional developer?

Learn from an industry expert and start developing professional React apps for clients, employers, or your own startup.