How we create a reusable CTA button with React Hook in Next.js

A Self-Contained UI component.

Intro

In BrewCareer.com, users will have 3 different status: normal visitor, signed up member, and mentor. According to UI, these 3 status share same CTA button with different states and behaviours, that means we need to create a button component which is adaptable no matter users are in which status.

What’s the challenge?

The CTA button needs to be self contained, it fully adapts to user’s status, so we need to set the logic properly, make sure users always get what they expect while they are interacting with application.

How we approach the solutions.

1. Scalability

Since users status potentially could be more in the future, we need to take scalability into consideration, regarding this, I create an object which defines the behaviour and state for each status of users.

2. Naming

We need to have this mindset, the code we write for work, is gonna be maintained by someone else in the future, so it has to be readable, and how we increase the readability? Descent naming is great way.

Each status is very specific, since we expect we will have different people to work on this codebase, when writing code for this functionality, we need to make sure naming is very descriptive, and let the naming self document.

3. Self Contained

Now we have the status object including all status, next we have to write the functionality which will automatically adapt to user’s status to ensure it’s self-contained, that’s where React Hook jump in.

First of all, I already have a Hook function useAuth() returning userProfile object, then I put adapting logic into useEffect() function, and make sure whenever userProfile changed, the adapting logic will be invoked again.

3. Reusability

While this CTA button will appear in different places, we need wrap the above logic as utils function, then let’s assume we have 2 different scenario but both requires CTA button.

Hi there, we are currently recruiting mentors on BrewCareer, if you have interest in coaching and guiding people to help them to approach next career goal, please feel free to sign up and join us 🙂

Founder of BrewCareer.com, Senior Front End Developer, UI/UX Designer, Blogger, Podcaster, Cats Lover.🐈, Ramen Enthusiast 🍜

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store