How do I reuse a component and make it generic in react?

Question

I'm creating a component for each svg icons. For that i'm providing the following properties for it,

export interface IconProperties{
  width?: string | number;
  height?: string | number;
  size?: "small" | "medium" | "large";
  onClick?: React.MouseEventHandler<SVGElement>;
  disabled?: boolean;
}

Now to create Component for each icon, I'm doing

import * as React from "react";
import Attachment from "../../svg/attach.svg";
const AttachmentIcon = (props: IconProperties) => {
  return (
    <div>
      <Attachment
        width={props.width}
        height={props.height}
        onClick={props.onClick}
        style={
         {props.size}
        }
      />
    </div>
  );
};

export default AttachmentIcon;

User will call icon component in the following way :

import * as React from "react";
import AttachmentIcon from "./iconComponents/AttachmentIcon";

const onClickOperation = (): void => { 
  alert("Icon Clicked!");
};

const DemoApp = () => {
  return (
    <div>
      <AttachmentIcon
        width="60px"
        height="60px"
        onClick={onClickOperation}
        disabled={true}
        size={"small"}
      />
    </div>
  );
};

export default DemoApp;

Here my properties is same for all the icons and I have to keep on repeating the same lines of code for each icon to make it as a component. How do I avoid duplicating same code for every icon.

Looks like Attachment is already a component. Why do you need that wrapper? — Aleksey L.
– Aleksey L., Commented May 4, 2020 at 6:56
@Aleksey L Like Attachment, I have 50+ icons to be converted into Components — anup r
– anup r, Commented May 4, 2020 at 6:57
Of course it is possible to create a factory which will do all the boilerplate. The question is why can't you use Attachment directly, what's the point of this wrapper? — Aleksey L.
– Aleksey L., Commented May 4, 2020 at 7:46
I can use Attachment directly, but I have to add custom properties to it (like size, onClick etc). That's the reason I'm trying out to create a wrapper on top of it — anup r
– anup r, Commented May 4, 2020 at 8:02

Long Nguyen Duc · Accepted Answer · 2020-05-04 07:42:16Z

1

You can create a factory method to generate Component.

import * as React from "react";
import Attachment from "../../svg/attach.svg";
import Email from "../../svg/email.svg";

const createSvgIcon = Component: React.Component<any> => (props: IconProperties) => {
  return (
    <div>
      <Component
        width={props.width}
        height={props.height}
        onClick={props.onClick}
        style={
         {props.size}
        }
      />
    </div>
  );
};

export const EmailIcon = createSvgIcon(Email)

const AttachmentIcon = createSvgIcon(Attachment)
export default AttachmentIcon;

answered May 4, 2020 at 7:42

Long Nguyen Duc

1,3451 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

upog · Accepted Answer · 2020-05-04 06:43:27Z

0

in AttachmentIcon.module.css

 .iconStyle{
            width: 60px;
            height: 60px;
            disabled:true;
            size:small;
    }

in Js file

import classes from './AttachmentIcon.module.css';
<AttachmentIcon className={classes.iconStyle} onClick={onClickOperation} />

answered May 4, 2020 at 6:43

upog

5,6268 gold badges57 silver badges87 bronze badges

Collectives™ on Stack Overflow

How do I reuse a component and make it generic in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related