Question 265480 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – When to put two components into one with an option?

I am building a component library and I have two logos:

Logo (large) and Logo (small)

They both look different and will be used in different places.

Should they be two separate React components. Or one react component with an option for primary or secondary.

They share one similar feature.

export type LogoProps = {
  knockout?: boolean;
  type?: 'primary' | 'secondary';
};

export function Logo({ knockout = false, type = 'primary' }: LogoProps) {
  return (
    <LogoFilter whiten={knockout}>
      {type == 'primary' && <PrimaryLogo />}
      {type == 'secondary' && <SecondaryLogo />}
    </LogoFilter>
  );
}

function PrimaryLogo() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg">
      ...
    </svg>
  );
}

export function SecondaryLogo() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg">
      ...
    </svg>
  );
}

What do you think? Two exports or one (current)?

Tags:

2

Answers


  1. 0

    This is really a personal/project consistency choice. I don’t think there’s a right or wrong decision here. Since you’re using typescript, I would say creating one Logo is perfectly acceptable in this scenario. If they are used in a very different capacity, maybe consider naming them accordingly. HeaderLogo, LogoIcon, etc.

    Login or Signup to reply.
  2. 0

    You could keep it in one component, the parent logo component, and a conditional for the image like this:

        export function Logo({ knockout = false, type = 'primary' }: LogoProps){
    return (
        <LogoFilter whiten={knockout}>
            <svg xmlns={type == 'primary' 
                ? 
                  "http://www.w3.org/2000/svg" 
                : "http://www.w3.org/3000/svg"}
            >
            ...
            </svg>
        </LogoFilter>
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search