react-codemod
react-codemod copied to clipboard
fix(remove-forward-ref): mark ref as optional in type intersections
The codemod now generates type & { ref?: RefType } instead of type & { ref: RefType } to correctly reflect that refs are optional.
Otherwise, code like this:
const VolumeIcon = React.forwardRef<
React.ElementRef<typeof Svg>,
React.ComponentPropsWithRef<typeof Svg>
>(({ width = "20", height = "20", ...props }, ref) => { ... }
<VolumeIcon /> // ← works
gets code-modded into code like this:
const VolumeIcon = ({
ref,
width = "20",
height = "20",
...props
}: React.ComponentPropsWithRef<typeof Svg> & {
ref: React.RefObject<React.ElementRef<typeof Svg>>;
}) => { ... }
<VolumeIcon /> // ← fails with `Property 'ref' is missing in type '{}' but required in type '{ ref: RefObject<SVGSVGElement>; }'`
and requires manual fixing.