Skip to content

Commit e24242a

Browse files
committed
Allow passing undefined to component props with exactOptionalPropertyTypes
The TypeScript configuration option exactOptionalPropertyTypes is documented at: https://www.typescriptlang.org/tsconfig/#exactOptionalPropertyTypes > With exactOptionalPropertyTypes enabled, TypeScript applies stricter > rules around how it handles properties on type or interfaces which > have a ? prefix. This means TypeScript will handle "undefined" differently than "not provided". Consider the following construct: ```jsx function MyIcon({ addCLass: false }) { let className: string | undefined; if (addClass) { className = "mx-2"; } return <FontAwesomeIcon icon={["fal", "coffee"]} className={className}/> } ``` In this scenario, classname will sometimes be passed as "undefined". This is allowed by the implementation, so allow it through the type interface as well.
1 parent 0a6f97d commit e24242a

File tree

1 file changed

+30
-30
lines changed

1 file changed

+30
-30
lines changed

index.d.ts

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,34 @@ type BackwardCompatibleOmit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K
2222

2323
export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>, RefAttributes<SVGSVGElement> {
2424
icon: IconProp
25-
mask?: IconProp
26-
maskId?: string
27-
className?: string
28-
color?: string
29-
spin?: boolean
30-
spinPulse?: boolean
31-
spinReverse?: boolean
32-
pulse?: boolean
33-
beat?: boolean
34-
fade?: boolean
35-
beatFade?: boolean
36-
bounce?: boolean
37-
shake?: boolean
38-
border?: boolean
39-
fixedWidth?: boolean
40-
inverse?: boolean
41-
listItem?: boolean
42-
flip?: FlipProp
43-
size?: SizeProp
44-
pull?: PullProp
45-
rotation?: RotateProp
46-
rotateBy?: boolean,
47-
transform?: string | Transform
48-
symbol?: FaSymbol
49-
style?: CSSProperties
50-
tabIndex?: number;
51-
title?: string;
52-
titleId?: string;
53-
swapOpacity?: boolean;
54-
widthAuto?: boolean
25+
mask?: IconProp | undefined;
26+
maskId?: string | undefined;
27+
className?: string | undefined;
28+
color?: string | undefined;
29+
spin?: boolean | undefined;
30+
spinPulse?: boolean | undefined;
31+
spinReverse?: boolean | undefined;
32+
pulse?: boolean | undefined;
33+
beat?: boolean | undefined;
34+
fade?: boolean | undefined;
35+
beatFade?: boolean | undefined;
36+
bounce?: boolean | undefined;
37+
shake?: boolean | undefined;
38+
border?: boolean | undefined;
39+
fixedWidth?: boolean | undefined;
40+
inverse?: boolean | undefined;
41+
listItem?: boolean | undefined;
42+
flip?: FlipProp | undefined;
43+
size?: SizeProp | undefined;
44+
pull?: PullProp | undefined;
45+
rotation?: RotateProp | undefined;
46+
rotateBy?: boolean | undefined;
47+
transform?: string | Transform | undefined;
48+
symbol?: FaSymbol | undefined;
49+
style?: CSSProperties | undefined;
50+
tabIndex?: number; | undefined;
51+
title?: string; | undefined;
52+
titleId?: string; | undefined;
53+
swapOpacity?: boolean; | undefined;
54+
widthAuto?: boolean | undefined;
5555
}

0 commit comments

Comments
 (0)