Best practice for making reusable generic component [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 1 hour ago.

开发者_开发技巧 Improve this question

I've got two different variants of cards, their widths are slightly different and one contains a button at the bottom while the other doesn't, but their height, font family/size and overall look is similar.

I decided to make a generic Card component. But ended up with a monstrosity of prop overloading(? dont know the proper term), where the Card component contains many different configurations that become difficult to maintain.

What is a better approach? In terms of 1. Should I even create a generic Card component that is reusable and 2. If I should make a generic reusable component is there a more maintainable way to do so?

type Props = {
  onPress?: () => void;
  label: string;
  subLabel: any;
  textBoxLayout: string;
  Button?: any;
  cardProportions: string;
  buttonProps?: object;
  imgSrc: URL;
};

const Card = (props: Props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress ? props.onPress : () => false}
      style={tw`${props.cardProportions} bg-white rounded-xl overflow-hidden mr-5`}
    >
      <RestaurantImg imgSrc={props.imgSrc} />
      {/* Get rid of this additional div */}
      <View style={tw`flex-1`}>
        <View style={tw`${props.textBoxLayout}`}>
          <View style={tw`justify-evenly`}>
            <Text style={tw`font-primary-bold text-sm`}>{props.label}</Text>
            <Text style={tw`text-1xs`}>{props.subLabel}</Text>
          </View>
          {props.Button ? (
            <props.Button buttonProps={props.buttonProps} />
          ) : null}
        </View>
      </View>
    </TouchableOpacity>
  );
};

RestaurantCard (which consumes Card)

type Props = {
  restaurantName: string;
  joined: boolean;
  imgSrc: URL
};

const RestaurantCard = (props: Props) => {
  const navigation = useNavigation();
  return (
    <Card
      imgSrc={props.imgSrc}
      onPress={() =>
        navigation.navigate("Home", {
          screen: "RestaurantDetails",
          params: {
            imgSrc: props.imgSrc,
            restaurantName: props.restaurantName,
            type: "restaurantDetails",
          },
        })
      }
      cardProportions={"w-card h-card"}
      label={props.restaurantName}
      subLabel="Brighton Vic"
      textBoxLayout={"flex-1 p-card flex-row justify-between"}
      Button={JoinQueueButton}
      buttonProps={{
        restaurantName: props.restaurantName,
        joined: props.joined,
        imgSrc: props.imgSrc
      }}
    />
  );
};

export default RestaurantCard;