How to extend an Ant Design component

Introduction

Developers using Javascript frameworks/libraries such as React, Vue or Angular often use a component library. Those provide completed components tied with plenty of functionalities and customisable design.

In this post we will learn about such a library and how to provide even more desired behaviours, functionalities and options to its components.
This is called component extension and it makes components even more reusable and easier to use.

Note: This post will be based on React, Typescript and AntDesign.

The what and the why

Ant Design (AntD for short) is the protagonist in this story. It is an extensive component library primarily made for React. It has versions for Vue and Angular too!

AntD offers plenty of components such as forms, inputs, menus, modals, loaders, notifications and much much more. We have been working with AntD for a while now and we have been greatly thankful for it.

As your applications grows, you start to use more and more components. These components tend to have very similarly written props and they start to stack up. Or in a completely different scenario, the component's design needs a change or its functionality needs more options. We developers try to use DRY principle as much as we can. Therefore the component extension is born.

You may be asking yourself when is a good time to extend a component? The correct answer is - whenever you start to use identical component on multiple places. This way you have a full control of it in the project.

How to do it

It is actually pretty simple.
Step one is to create a new .tsx component and name it accordingly to one's needs. Then we must import the actual component we want to extend and modify it to fit our needs.

DatePicker extend example

We create a component called DatePickerLocalised.tsx (the name is totally up to you) and import the AntD's DatePicker inside with the following import.

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";

This imports the DatePicker component and its interface for the props. Now all we have to do is make a functional component.

export const DatePickerLocalised: FunctionComponent<DatePickerProps> = (  
  props  
) => {  
  return (  
    <AntdDatePicker
      {...props}  
    />  
  );  
};

This is now a component which is an exact copy of the one from the component library AntD. Let's extend it by adding a locale date format.
What goes in the format prop can be seen in the AntD documentation for the DatePicker component.
Since I'm from Croatia, I'm going to use Croatian formats.

The whole component now looks like this:

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";  
import { FunctionComponent } from "react";  

export const defaultDateFormats = [  
  "DD.MM.YYYY.",  
  "DD.MM.YYYY",  
  "DDMMYYYY",  
  "DDMMYY",  
];  

export const DatePickerLocalised: FunctionComponent<DatePickerProps> = (  
  props  
) => {  
  return <AntdDatePicker format={defaultDateFormats} {...props} />;  
};

Now we can use this “localised” date picker throughout our whole app. No longer do we have to worry about the locale format being wrong! Amazing!

But what if we want to extend it even more, by adding custom props? It is also quite simple!
We have to create a new type with its DatePickerProps and add our own interface to the extension. All that remains is passing it down to the newly created component.

I have added fullWidth custom prop to the new interface ExtendedDatePickerProps and added a style prop in the AntdDatePicker.
Take a look at the following snippet:

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";  
import { FunctionComponent } from "react";  

export interface ExtendedDatePickerProps {  
  fullWidth?: boolean;  
}  
export type DatePickerLocalisedProps = DatePickerProps &  
  ExtendedDatePickerProps;  

export const defaultDateFormats = [  
  "DD.MM.YYYY.",  
  "DD.MM.YYYY",  
  "DDMMYYYY",  
  "DDMMYY",  
];  

export const DatePickerLocalised: FunctionComponent<DatePickerLocalisedProps> = (  
  props  
) => {  
  return (  
    <AntdDatePicker  
      style={props.fullWidth ? { width: "100%" } : undefined}  
      format={defaultDateFormats}  
      {...props}  
    />  
  );  
};

Now you can use the component with the custom prop anywhere in the application like this:

<DatePickerLocalised  
  fullWidth={true}  
  onChange={(newDate) => setDateState(newDate)}  
/>

Note the destructuring of props {...props} always goes at the bottom of the extended component. This is because of a need of overriding. E.g. the format prop which is set inside of the extend can be also passed when using the component. It will override the default created behaviour.

You can add anything you desire in your extends. From enums to creating validator functions. The components can be extended as far the eye can see.

Conclusion

You can now imagine the possibility of different reusable components you can create with the extension. It is really useful to customise the components and make them suitable for your needs.

We have reached the end, thank you for reading. I hope you have learned something new in this post.
Do you have something to add, do you have your own way of extending components? Tell me more in the comments.

Check out some of my other content!

If you are new to the Hooks world check out this article
If you have wondered about Top 10 React hook libraries? Then this is a perfect post for you!

Comments

[Praveen Saraogi]

How do you import DatePickerProps from antd? Which version are you using? Since for me it is not supported. I am not able to import interfaces from antd.
I am using antd 4.4.1

[Juraj Pavlović]

The version mentioned we had in the project at the time was ^4.16.1
You can easily import AntD types such as DatePickerProps for all versions above 4. You should be able to import it just like mentioned in the example