react-share: Type errors after migrating to v4

I migrate to v4 and I’m now getting these type errors:

Type '{ children: Element; url: string; }' is missing the following properties from type 'Pick<Props<{ quote?: string; hashtag?: string; }>, "form" | "style" | "title" | "type" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 264 more ... | "resetButtonStyle">': form, title, type, name, and 256 more.

I’m using it like this, nothing special:

<FacebookShareButton url={url}>
  <FacebookIcon {...iconProps} />
</FacebookShareButton>

It seems to require all props including native ones. I checked out the demo and it works as expected. I’m on the latest react and typescript versions.

Any ideas? @nygardk

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 14
Comments: 16 (1 by maintainers)

Most upvoted comments

@nygardk any updates please ?

scroobius-pip on Jan 13, 2020

Found a workaround until: https://medium.com/@tomsoir/typescript-how-to-rewrite-type-definition-file-file-d-ts-of-any-node-modules-package-1eed7f5630d1

declare module 'react-share' {
  declare const FacebookShareButton: any;
  declare const FacebookIcon: any;
  declare const TwitterIcon: any;
  declare const TwitterShareButton: any;

  export {
    FacebookShareButton,
    TwitterShareButton,
    FacebookIcon,
    TwitterIcon
  }
}

eshton on Jan 7, 2020

For me, this one was solved by install/update of @types/react package. I had it at 16.9.5 and 16.9.35 silenced the warnings. Might possibly also fix #301

tomdracz on May 20, 2020

I believe the issue is here: https://github.com/nygardk/react-share/blob/e72dba51654c8277b9cfd87b9e8f354b36017fd3/src/hocs/createIcon.tsx#L3

The Props required by Icon inherit all SVGProps (except width and height). I think this would be a simple fix of changing Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> to Omit<Partial<React.SVGProps<SVGSVGElement>>, 'width' | 'height'>

definitelyreal on Jun 30, 2020

My workaround is currently the following:

{/*
// @ts-ignore: https://github.com/nygardk/react-share/issues/277 */}
<FacebookShareButton {...shareProps}>
  <FacebookIcon size={24} />
</FacebookShareButton>

Far from ideal, though it’s basically the same as redeclaring an export as any.

knpwrs on Mar 1, 2020

I upgraded react types and it seemed to do the trick. "@types/react": "16.9.35"

mihir0x69 on Jun 3, 2020