A Short List Of Handmade React Components That Will Fit Your Daily Needs

Photo by Unsplash

I’ve been working with React for a while now and I’m still surprised how it lacks packages for everyday components that help building robust and intuitive interfaces.

I figured out that in spite of how big the React community is, I was losing much more time searching for a community-made component than making it on my own.

 

This article will go about a short list of tiny components that solve daily needs in front-end development.

No library, just handmade stuff you can customize and tailor as you go.
Full source code provided with Codepen demonstrations.

1. Erasable input

The cross shows only if the input isn’t empty

How it works:

  • A div contains an input and a span
  • The input takes all the space and has padding to prevent text from going under the delete button.
  • The span is the delete button, positioned on top of the input and shown conditionally. When clicked, the input is cleaned and it disappears.

Problems solved / Advantages:

  • Getting rid of the keyboard on desktop and on mobile.
  • On mobile overall, it is a pain to touch the input and keep pushing the delete key till everything is cleaned.

Demonstration:

Start typing ! ✍

2. Cards

Those fancy gradients come from https://webgradients.com/

Cards were undoubtedly made popular thanks to material design and it’s worth using.

How it works: 

  • A card is just a rectangle with a box-shadow
  • The delete button (optional) is positioned relatively to the card, on the top right corner (see this to know how it works)

Problems solved / Advantages:

  • Displaying a list of similar packed information.
  • Very versatile component (it can host buttons, images, tags, and even more).
  • Using CSS Flexbox or CSS Grid it is very easy to provide a responsive structured layout.
  • Easy to animate and to customize, adaptable to any kind of content (employee detail, flight information, travel showcase, feed)

Demonstration:

Click on the delete button !

3. Drop-down menu

You can toggle it with the top right ellipsis button | Material-ish-ness

I combined it with a card ⬜.

How it works:

  • A div has a child div which is the toggle button and another child div which is the actual menu.
  • The toggle button is a div with some padding to make clicking easier (i.e on a bigger surface). When clicked, the component’s state toggle an active property that determines whether the menu is shown or not and whether the toggle button has a gray background or not.
  • The menu is a div that contains a ul . The active state’s property determines if this div is expanded or collapsed (aka shown or hidden).
  • The menu items are passed by property using an array of objects that hold: label | icon | onClick with onClick being an actual function.

Problems solved / Advantages:

  • Provide an easy to integrate menu to any component (kind of a contextual menu)
  • Useful when there is no more available space to display a menu.
  • Unobtrusive and easy to customize.

Demonstration:

4. Tabbed pane

Navigation bar with automatically generated buttons and active styling

Warning:

My approach renders only one component at once.

It means that if you fill a form and change tab, the form will be empty when coming back.

It is very easy to circumvent, just like with the navigation buttons you could do this:

How it works:

  • A TabbedPane has a tabs component’s property, and an active state’s property that determines which tab is being shown.
  • tabs is an array of objects represented by : label | component with component being an actual JSX component. label determines what is shown in the navigation bar.
  • Only one tab is rendered at once, and navigation buttons update the active state’s property

Problems solved / advantages:

  • Display multiple boards without having to change page.
  • Well adapted to multi-step processes like registration (personal details, company details, bank details).
  • Could be used with any kind of navigation (side bar, top bar, bottom bar).
  • Works out of the box with active link styling handled.

Demonstration

Libraries might exist for some of the components I’m sharing but:

  • Having control over what you are using is a real game-changer, from customization to functionality.
  • If something breaks you’re the only responsible.
  • If you want to extend a component you’ll know how to because you did it on your own.

Thanks for reading

I’m happy to share those components and hope it will help you 👌.

May I suggest you to give a glance to my last article ?

Make your own Youtube-like progress bar

Feel free to reach out at https://dmware.fr

“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash

 

David

Fullstack Developer, Trainer & Entrepreneur.

Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.

Leave a Reply

Your email address will not be published.

Share
Share