Create a React.js Auto-complete Component With Material-UI in < 100 Lines of Code - Intro
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:
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 VideoYak.io. In the upper left-hand corner you’ll see a search box. Search for a topic you’re interested in learning more about.
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.
When you select a suggested result, the data results for your selected search term will be retrieved from Youtube’s databases.
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.