Building Reusable & Customizable Components by Using React JS⚡

React JS is one of the today’s most popular JavaScript Library. We can build modern, fast, qualified, scaled and easy-to-manage applications with React.

In this article, we will develop an UI element for you to add your UI kit to use almost your every project. You can save time, build more systematic project and eliminate code difference on a project by building these elements, while starting an app development.

Using a Shared & Generic Components

Constructing the elements inspiration comes from atomic design concept, in a variable structure.

“ Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. ”

Atomic design concept

This is the a visual demonstration of what strategy we have set

Let’s create a button which are the smallest part of design like atoms in matter. In this way, we can retrieve the buttons we created wherever we need it.

The button can be customized and categorized in the application according to usage areas.

For example, we have 2 different grouped buttons for 2 different operations

• Type 1 button is linked to blog page and green colored
• Type 2 button open a pop-up and is blue colored etc.

The button pattern we created contains 3 different props.

Click event, classname and text.

Let’s create a default onClick event for our button with handleClick() function and observe this case.

As a first step, let’s start by giving our button a default classname. Note that this style is a default prop for the button.

And let’s take a look again at the final state of our shared button component.

After the button component we created, let’s write a default style to our button.

After creating a default button style, let’s create buttons of different styles from the same component by adding custom styles.

You may have noticed that our custom classname has received a name and property in addition to our default classname.

Now, we have custom buttons that we create on a single component. Let’s write the text we want to the text props and call these buttons to examine the latest situation.

Let’s take a look at what kind of output we can use by using 3 different buttons in different parts of a paragraph.

Now we can create many atomic parts like buttons. Then we can combine these parts and create larger reusable & customizable components.

For live demo👇

reusable-and-generic-component - CodeSandbox

Please feel free to comment and put your thought on this post. If you like what you read, don’t forget to clap!