Why Creating Wrapper Classes for Component Libraries Is a Great Idea in Web Development

No wonder there are tons of third-party component libraries available that can be integrated into your project to speed up the development process. Libraries like Angular Material UI, Bootstrap, Chakra UI, Next UI, and others offer various other rich features that are lightweight, fast, and adhere to accessibility norms. However, direct access to library components without an abstraction layer could lead to numerous inconsistencies and maintainability issues in the future. This is the primary reason I insist on creating classes that encapsulate the original composition, which I refer to as wrapper classes. These classes are easy to create and allow more flexibility and consistency when building an enterprise web application.

Benefits of Creating Wrapper Classes

1. Consistency

When it comes to consistency, I mean the look and feel of the components throughout the web application. Would you allow dropdowns or radio buttons to appear differently? The answer is no. Wrapping ensures uniformity and consistency across the app, enabling the components to seamlessly integrate with the product's specific branding. Here, branding refers to the themes and skins of the common components that you will use throughout the app.

import React from 'react';
import { Button as MUIButton } from '@mui/material';

const Button = ({ children, variant = 'contained', color = 'primary', ...props }) => {
    return (
        <MUIButton variant={variant} color={color} {...props}>
            {children}
        </MUIButton>
    );
};

export default Button;

In this case, the button wrapper ensures consistency by ensuring that all button components within the application have the same default appearance.

2. Maintainability

Isolating or removing application code dependencies from third-party components ensures maintainability. Let's say you wish to switch to a different third-party library for a known reason or to achieve functionality that is not available in the current library. All you would need to do is update the common component wrappers, and voila, you are done. This saves you from making changes to each and every component through the app.

Example: Suppose you want to switch from Material-UI to Ant Design. With wrappers, the change is localized.

import React from 'react';
import { Button as AntButton } from 'antd';

const Button = ({ children, type = 'primary', ...props }) => {
    return (
        <AntButton type={type} {...props}>
            {children}
        </AntButton>
    );
};

export default Button;

Here, switching from Material-UI to Ant Design requires only changes within the wrapper components, preserving the integrity of the application code.

3. Customization

With wrappers, you can change or add functionality to library components without changing the underlying library code, making them more suitable for your application's requirements. This can involve incorporating other libraries, adding extra props, or even creating unique styles.

import React from 'react';
import { Button as MUIButton } from '@mui/material';
import PropTypes from 'prop-types';

const Button = ({ children, variant = 'contained', color = 'primary', onClick, ...props }) => {
    const handleClick = (e) => {
        // Custom logic before onClick
        console.log('Button clicked!');
        if (onClick) onClick(e);
    };

    return (
        <MUIButton variant={variant} color={color} onClick={handleClick} {...props}>
            {children}
        </MUIButton>
    );
};

Button.propTypes = {
    variant: PropTypes.string,
    color: PropTypes.string,
    onClick: PropTypes.func,
};

export default Button;

In this example, we have added logic to the button’s onClick event, which is used for logging.

4. Reusability

Wrapping and making components very generic can promote reusability and make them extensible in the future. Your organization can use these wrapper component libraries across multiple projects, providing uniformity and reducing development time, thereby saving the company money.

// button.js in shared component library
import React from 'react';
import { Button as MUIButton } from '@mui/material';

const Button = ({ children, variant = 'contained', color = 'primary', ...props }) => {
    return (
        <MUIButton variant={variant} color={color} {...props}>
            {children}
        </MUIButton>
    );
};

export default Button;

You can ensure reusability and save time by importing and using the same button component across several projects by adding it to a shared component library.

Implementation Example: A Simple Form

To illustrate the advantages of using wrapper classes, let’s build a simple form using wrapped components.

// Input.js (Wrapper Component)
import React from 'react';
import { TextField as MUITextField } from '@mui/material';

const Input = ({ label, ...props }) => {
    return <MUITextField label={label} {...props} />;
};

export default Input;

// Form.js (Using Wrapped Components)
import React from 'react';
import Button from './Button';
import Input from './Input';

const Form = () => {
    return (
        <form>
            <Input label="Name" />
            <Input label="Email" type="email" />
            <Button>Submit</Button>
        </form>
    );
};

export default Form;

In this example, the Form component uses the Input and Button wrapper components. This approach ensures that any changes in the styling or behavior of Input and Button only need to be made in their respective wrapper files, rather than throughout the entire application.

Conclusion

Keeping a standard library for your components and wrapping it ensures consistency, maintainability, customization, and reusability in your web application development. You should implement this common practice to minimize your development effort.

Happy Coding!