See How Easily You Can Create react-tabs

Yazan Aabed
May 11, 2018 · 6 min read

The new React Context API is officially out, and is safe to use!

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

This API is mainly used to share things between React components to solve the “props-drilling problem. Props drilling is the sharing of props down from parent components to other child parts of an application, making sure that everything is rendered when it’s needed. But why share all these props between elements when it may not be required? That’s where the ContextAPI comes in.

People sometimes confused and start using ContextAPI everywhere without any need to use it. Like people start using Redux and connect it to every component of the project.

Check this email from Kent C. Dodds about the prop-drilling! He shows that prop-drilling not always a problem!

Don’t use context just to avoid passing props a few levels down. Stick to cases where the same data needs to be accessed in many components at multiple levels. — React Team.

For a while, the new ContextAPI introduced by react team. So, I decided to implement a simple idea using this new approach to learn more about it. I start searching what I can perform. Then after a while, I decide react-tabs.

When I start implementing the react-tabs single component, I wrote every step to achieve the goal and convert them for this article.

“Computer Science is no more about computers than astronomy is about telescopes.” — Edsger Dijkstra

Example Usage After Finish Implementation

Here’s is the last example of the code after I finish the react-tabs implementation using the Context API.

I published this component to npm, and created a simple sandbox example , showing how to use it:

Implement React Tabs Without The ContextAPI

I suggest when you learn new things is to write code on the way you know then convert it to the brand-new style you want to learn. For example, if you know the compound-components concept to share stuff. Create a parent component called tabs-parent that contain the tab-state and contain methods for add tabs, remove tabs, active tab, previous active tab. Then share it between things. I’ll show you an example how to build react-tabs using compound-components pattern.

Magic start from the code below on compound-components. Thanks to Kent C. Dodds for his course about the advanced React component patterns. Also, you can check this article “Advanced React Component Patterns” written by him about these things.

When you use the map function on the children property, you can loop through elements inside your component and clone them as new elements and pass whatever you need. This trick also doesn’t clear the properties moved from outside for these children components it copies them and merges them with your component-state from the main wrapper component.

Here’s the code sandbox for the full implementation:

Now time to use the new ContextAPI

The new context API far more straightforward than before, no need to define multiple things on parent-component and children-component to share props and state around. You merely need a provider for the shared values, and the consumers give you the stored values on the provider. Check the sample code below to show how it’s easy to start using ContextAPI.


Implement React Tabs Using ContextAPI

Its the same as the compound-components pattern one parent is responsible for share things between components. On ContextAPI called the provider. All children inside the provider can use the consumer to get the state stored inside the provider. Its the same as compound-components using clone children with the needed data. You can check the sample code below and make the comparison between the two patterns.


Tabs Context Component

This context contains the shared state between the Tab component and Tabs component.

  • Tabs: Array of tabs to store the added tabs to render them at the top so a user can click one of them and change the state by himself.
  • Active Tab: Object to store which tab show to a user this is a required entity for the react-tabs component contain the id for the active tab.
  • Add Tab: Function to give the ability for the Tab child component to add itself when it’s mounted.
  • On Click: Function to change the active Tab when new Tab clicked.

Tab Container Component

The code below shows the Tab container component, and it merely indicates when its id is the active one.


All Tabs Container

If you are wondering why I am using glamorous, I think using the CSS-JS approach on styling the React components is a remarkable thing because you have the controller on anything and encapsulate your element with itself. I recommend using glamorous for this because it’s flexible in too many cases.

Conclusion

There are too many patterns out there. But make sure to choose which mode is right for your case. Creating reusable components in the right way is one of the keys to be a frontend engineer. So, don’t stick and start coding your elements using the new patterns shown out there and choose the right one. Also, don’t hold for one mode and leave the others good things.


I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.

Hi my name is Yazan Aabed. Grown up in Palestine. My major was in computer science. I am a Frontend Engineer & JavaScript lover 💫👨‍💻. Mostly working with Frontend frameworks like (AngularJs, ReactJS). You can call me #Geek 🤓. Also, I Like to share my knowledge with other people and learn from them 💥🔥🌪. You can find me on GitHub, Medium, Twitter.




DailyJS

JavaScript news and opinion.

Yazan Aabed

Written by

A fullstack engineer and javascript lover, you can call me #Geek 🤓💥🔥🌪, like to write, learn, read, music, programming, challenges. - https://www.yaabed.com

DailyJS

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade