Commonly Used UI Components In React

There are certain components, like dropdowns and modals, that always show up on the front-end. Requirements might make you change a few things about these components, like styling, but most of the core logic stays the same. If you work with React, making common UI components is relatively easy. I'll go over a few of these components and show you the code you can use to create them.

One quick note, the code for these will be very basic with little to no styling. I tried to limit the number of functions in the components as well. That’s so you can customize them to work with your specific application. So please feel free to take these simple templates and make them as fancy as you want!

Dropdown

Sometimes you see dropdowns so often that you forget they're everywhere. They aren't complicated to make, but people do take different approaches. The main thing to remember is that this is just a list of data at the end of the day. Whether it's a dynamic list or each of the values navigate to a different screen, the dropdown itself is simple. Here's an example implementation. Remember to replace the hard-coded list with your back-end call!

https://codesandbox.io/s/youthful-fermat-w6ui2

Form

How many websites or apps have you used recently didn't have a form? You have to log into applications and you'll always see a form trying to get a email address from you. Many elements go into making good forms, like validation or useful tooltips. Once you know what information you need from the user, the form isn't so hard to make. Here's an example with a lot of the form elements.

https://codesandbox.io/s/white-river-tl7fs

Modal

Any type of popup you encounter and many forms will be modals. They're good elements to use to show meaningful information from a current page without redirecting to a new page or changing the layout. It's useful to get information from users as well because it lets you isolate an element on the screen so the user is forced to pay attention to it. There are libraries out there for modals in React, but making one can be fairly simple. Here's an example.

https://codesandbox.io/s/elated-borg-xugyc

Search

Making search boxes is extremely common in applications. You'll see them in e-commerce, finance, CRMs, and almost anything else with searchable data. It's one of those things that's good to have in your toolbox. Here's one implementation of a search that returns a list of items as you type.

https://codesandbox.io/s/inspiring-cannon-cm7f2

These are just a few of the components you'll see all the time. Hopefully the code examples are useful! Keep in mind that if you're a front-end developer these kinds of coding challenges can come up in interviews. It is really easy to take these components for granted and forget how complex they can become.

Individually, the way they work is simple. But when someone wants a single page application where these components update dynamically based on what the other components are doing, things can get crazy really fast. Also remember that these are typically components users interact with directly. Design them to be accessible and user friendly and your users will be more likely to give you the information you need.

---

I'm thinking about doing more articles that have real code examples in them, but I can't decide if the code articles should take priority over the non-technical articles. I'd really appreciate your feedback because I want to keep writing stuff you find useful! I'll still be writing both kinds of articles, just trying to figure out which is more useful. Let me know in the comments or on Twitter: https://twitter.com/FlippedCoding

Comments

[Sung M. Kim]

Hi Milecia, thank you for the post.

You can also embed sandboxes (, for which you can check out the Editor Guide).

{% codesandbox inspiring-cannon-cm7f2 %}

[Milecia]

😱 I didn't know that! I'll update this now! Thank you!

[Sung M. Kim]

You're welcome
& Nice~ Thank you for the update~

[Felix]

I'd highly recommend Material UI's components with theming. Theming is done in the root of your application (the ThemeProvider) and applied to all children. It can be used to dynamically set things like light and dark theme or brand colours, and it can fully override any CSS (in this case JSS) of the components.

[Arol]

Thank you Milecia
I'll use it ;)