I got a Badge component in my React app. The badge can be painted in different colors. In order to make it more universal i’ve decided to add a prop called getBadgeColor. The idea is to implement different functions for different needs. For example, in one scenario i need badges for loading statuses. So i implement the function getStatusBadgeColor that looks like this:
enum BadgeColors {
RED = 'red',
YELLOW = 'yellow',
GREEN = 'green',
BLUE = 'blue',
INDIGO = 'indigo',
PURPLE = 'purple',
PINK = 'pink',
}
export type BadgeColor = typeof BadgeColors[keyof typeof BadgeColors];
export type getBadgeColor<T> = (value: T) => BadgeColor;
export const getStatusBadgeColor: getBadgeColor<TStatus> = (status: TStatus) => {
switch (status) {
case Statuses.STATUS_SUCCESS:
return BadgeColors.GREEN;
case Statuses.STATUS_ERROR:
return BadgeColors.INDIGO;
default:
return BadgeColors.BLUE;
}
}
My Badge component looks like this.
interface BadgeProps<T> {
label: string;
color?: BadgeColor;
getBadgeColor?: getBadgeColor<T>;
value?: T
}
export const Badge = <T,>({ label, color, getBadgeColor}: BadgeProps<T>) => {
const colorValue = getBadgeColor ? getBadgeColor() : color
return (
<span className="...">
<svg className={cn('h-1.5', 'w-1.5', `fill-${colorValue}-500`)} viewBox="0 0 6 6" aria-hidden="true">
<circle cx={3} cy={3} r={3} />
</svg>
{label}
</span>
)
}
I pass the function like this
<Badge label={record.status} getBadgeColor={() => getStatusBadgeColor(record.status)} />
So the problem is basically that i can’t invoke a function inside the Badge component without calling it with arguments. Is there is a way i can do it? I would appreciate any help
5
Your function type expects a parameter because of value: T in the function’s type. This essentially tells typescript “Hey, no matter what, there will be a parameter passed in to this function, and it will be of type T”. A quick and easy way to fix this would be to do value?: T instead as this tells typescript that the param “might or might not be there”, or that it’s possibly undefined. The new type would look like this:
export type getBadgeColor<T> = (value?: T) => BadgeColor;
However, you may want to rethink the prop type you are passing in to the component to improve clarity. If you were to plainly express the type you are passing in to the react component, it would look like this:
interface BadgeProps<T> {
label: string;
color?: BadgeColor;
getBadgeColor?: () => ReturnType<getBadgeColor<T>>;
value?: T
}
since you are passing it a function that calls getBadgeColor.
Since you are just passing an anonymous function that doesn’t expect an input and should return the badge color, maybe consider using something like this as your prop type:
interface BadgeProps<T> {
label: string;
color?: BadgeColor;
getBadgeColor?: () => BadgeColor;
value?: T
}
This also gives you the flexibility of returning a plain badge color from the function passed in, which may help if you end up storing the badge color in state or something else.