Skip to content

Commit 00a8f35

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 432b921 commit 00a8f35

File tree

1 file changed

+28
-28
lines changed

1 file changed

+28
-28
lines changed

index.d.ts

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,32 @@ 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-
transform?: string | Transform
47-
symbol?: FaSymbol
48-
style?: CSSProperties
49-
tabIndex?: number;
50-
title?: string;
51-
titleId?: string;
52-
swapOpacity?: 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+
transform?: string | Transform | undefined;
47+
symbol?: FaSymbol | undefined;
48+
style?: CSSProperties | undefined;
49+
tabIndex?: number | undefined;
50+
title?: string | undefined;
51+
titleId?: string | undefined;
52+
swapOpacity?: boolean | undefined;
5353
}

0 commit comments

Comments
 (0)