3 Ways You Could Customize 3rd Party React Component

Introduction

Component libraries make our life easier.

But as developers, you would often find yourself in situations where 3rd party components don't provide the functionality or customization capability the project needs.

We are left with 2 choices:

1. Write the component from scratch yourself
2. Customize the 3rd party components

What to choose depends on the component and the situation that you are in.

Apparently, some components are not customizable, Some feature requirements are not feasible. But most of the time, customizing 3rd party component is the less time-consuming option. Here's how.

Before we start

As example, we are going to customize react-bootstrap-typeahead component.

Here's the starter if you wanna follow along https://stackblitz.com/edit/react-hznpca

1. Overwriting CSS

This is fairly straightforward.

Just find out what's the component's CSS classes and overwrite them with new CSS.

Example

Goal: Add a dropdown icon to the input box, so that it looks like a drop-down.

Just add Font Awesome to index.html

and add these CSS to style.css

Demo: https://stackblitz.com/edit/react-wdjptx

2. Wrapper Component

This is where you could alter the default behavior of the 3rd party component.

Start by creating a wrapper component CustomizedTypeahead and replace Typeahead with it.

https://stackblitz.com/edit/react-rwyjmm

This wrapper component has no effect for now. It's simply passing props down to the Typeahead component.

We are going to customize the component behavior by making changes to props.

Example: Setting Default Props

Goal: Adding default props

Let's start with the simplest customization.

Let say we want all the CustomizedTypeahead to have the clearButton props enabled by default.

We can do so by

This is equilavant to

We create injectedProps and will put all the props modification inside to make the codes manageable.

Demo: https://stackblitz.com/edit/react-tk9pau

Example: Modifying Props

Goal: To sort all options by alphabetic order

We are receiving options, which is an array of objects, and labelKey, which tell us that the option's label should be optionObject[labelKey]. Our goal is to sort optionObject[labelKey] by alphabetic order.

We can do so by using Array.prototype.sort() to sort the options array.
This way, the options in injectedProps will overwrite the original options in props. That's how we can sort all options by alphabetic order by default.

Demo: https://stackblitz.com/edit/react-cqv5vz

Example: Intercepting Event Listeners

Goal: When the user selects an option, if the user has selected both "California" and "Texas" together, alert the user and clear the selection (for no particular reason other than for demo).

This is the fun part where you can do lots of customization.

Basically, this is how it will work,
Note the if(onChange) onChange(selectedOptions);. This makes sure that the original onChange event listener continues to run after we intercept it.

Here's what we did in the code above,

1. We create an onChange function that is of the same structure of the default onChange function. It's a function that receives an array of selected options.
2. We scan through the selected options and check if it's valid.
3. If it's invalid,
   • show an alert
   • clear the input
4. Run the original onChange event listener

Demo: https://stackblitz.com/edit/react-ravwmw

3. Modifying the source code

Caution: Don't overuse this! This is your last resort. You should only do this if there is no other choice.

If none of the above works for you, the choices you have are now limited to:

• Find another component library
• Write your own component from scratch
• Modify the component source code

It's actually not uncommon that one would have to modify a package's source code to fit a project's need. Especially if you found a bug in a package and you need it fixed urgently.

But there are a few cons:

• Some package uses different languages like CoffeeScript, Typescript. If you don't know the language, you don't know how to edit it.
• It can be time-consuming to study the source code and figure out where exactly to put your modification.
• You may unintentionally break some part of the package.
• When the package updates, you would need to manually apply the update.

If you decide to go ahead and make some modification to the source code, here's how.

1. Fork the Github Repository

In our example case, go to https://github.com/ericgio/react-bootstrap-typeahead and fork the repo to your own GitHub account.

2. Clone the repo to your machine

3. Make the modification

4. Push the repo to your GitHub account

5. Install your repo as a dependency

After you fork the repo, your GitHub repo's URL should be https://github.com/<your GitHub username>/react-bootstrap-typeahead.

You can install this git repo as a dependency by executing this command

npm i https://github.com/<your GitHub username>/react-bootstrap-typeahead

After installation, you should see this in package.json

  "dependencies": {
    "react-bootstrap-typeahead": "git+https://github.com/<your github username>/react-bootstrap-typeahead.git"
  }

Conclusion

We talked about 3 ways to customize 3rd party React component.

1. Overwriting CSS
2. Using Wrapper Component
3. Modifying the source code

Hopefully, this would make your life as a React developer easier.

In the meantime, let's all take a moment and be grateful to all the open source creators/contributors out there. Without these open source packages, we wouldn't be able to move as fast as we do today.

What's your experience with 3rd party component libraries? What other method would you use to customize them? Leave a comment!

Comments

[Sung M. Kim]

😮 Wow. This is awesome~

Thank you, Jacob.

I've used Ant Design's autocomplete but haven't had idea how to inject custom properties (accessibility props) but your article provided how I can get started.

[yerycs]

Hello, thanks for your post.
About first case, if I use styles.modules.scss, then how can I override css?
If you tell me about this, I will appreciate it.
Thank you.

[Jacob Goh]

Hi

If you are using CSS modules, you can use :global to target a CSS class name in a component.

for e.g.

/* sample.module.scss */
.wrapper :global(.a-class-inside-component) {
    padding: 1px;
}

will be compiled to CSS similar to

.wrapper_<some_random_hash> .a-class-inside-component {
    padding: 1px;
}

Hope this helps.

[yerycs]

Great. It works. Thank you for your kindly help.
Can you tell me .wrapper meaning?
For me, it works with


:global(.a-class-inside-component) {
padding: 1px;
}

Maybe .wrapper has other meaning?
Thank you.

[yerycs]

And if using this method, I have to use !important to override component.
Can you tell me if any other way is not using !important.
Thank you.

[Jacob Goh]

Since

:global(.a-class-inside-component) {
    padding: 1px;
}

will be compiled to

.a-class-inside-component {
    padding: 1px;
}

it will affect every components which uses class .a-class-inside-component globally.

If you want the CSS to be applied globally, this is alright.
If you want to scope the CSS to 1 component only, it's recommended to use a wrapper class.

[yerycs]

Thank you very much.
Should I use !important in my custom modules.scss to override css?
Is there any other way?

[Jacob Goh]

Generally, it's considered a bad practice to use important. Don't use it unless you absolutely have to.

To avoid using important => stackoverflow.com/a/27443631/5599288

[yerycs]

I will consider your words.
Thank you for your kindly help.
Hope good posts in the future.
Regards!

[Jacob Goh]

Glad it helped :) I know Vue too. I feel like Vue components would be even more customizable. For example, in wrapper component, you could set child's state like stackoverflow.com/a/51675344/5599288

[Lukas Klinzing]

Patching sounds also nice a D straight forward. npmjs.com/package/patch-package