Type errors after migrating to v4

[andreiho]

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

[eshton]

I have the same issue, please help!

[eshton]

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
  }
}

[scroobius-pip]

@nygardk any updates please ?

[knpwrs]

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.

[andreiho]

After another round of upgrading all my dependencies, the issue seems to be gone. I'm on TypeScript 3.8.3 now. Not sure where and why exactly it went wrong.

[tomdracz]

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

[mihir0x69]

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

[dewaleolaoye]

Yeah, @types/react upgrade fix it on my end too

[nygardk]

I hope it's fixed with having the newest version of @types/react. Please open a new issue if not 🙂 .

[knpwrs]

I'm still seeing this on react-share@^4.2.0, @types/react@^16.9.35, and typescript@^3.9.5. @nygardk would you prefer a new issue or can we re-open this one?

[exinferis]

Same problem occurs or me as well with typescript@^3.9.5, @types/react@^16.9.37 and react-share@^4.2.0

Ignoring it for now using {/*// @ts-ignore: https://github.com/nygardk/react-share/issues/277 */} seems to be the best option I could find.

[definitelyreal]

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'>

[shaohaolin]

+1 for this issue.

[shi-rudo]

also +1

[christopher-caldwell]

Would you prefer a "+1" comment, or just thumbing up the 1st comment?

If anyone is hurting in the meantime, this is working for me

// react-share.d.ts

declare module 'react-share' {
  import { FC, CSSProperties } from 'react'

  interface ShareButtonProps {
    children: string | JSX.Element
    /** URL of the shared page */
    url: string
    disabled?: boolean
    disabledStyle?: CSSProperties
    /** Opened window dimensions */
    windowWidth?: number
    /** Opened window dimensions */
    windowHeight?: number
    /** Takes a function that returns a Promise to be fulfilled before calling onClick. If you do not return promise, onClick is called immediately. */
    beforeOnClick?: () => Promise<void>
    /** Open dialog on click. Defaults to `true` except on EmailShareButton */
    openShareDialogOnClick?: boolean
    /** Takes a function to be called after closing share dialog. */
    onShareWindowClose?: () => void
    /** Reset button element style. Preferred to be set to false if you want to customize the button style. */
    resetButtonStyle?: boolean
  }

  interface FacebookShareButtonProps extends ShareButtonProps {
    /** A quote to be shared along with the link. */
    quote?: string
    /**  A hashtag specified by the developer to be added to the shared content. People will still have the opportunity to remove this hashtag in the dialog. The hashtag should include the hash symbol. */
    hashtag?: string
  }
  declare const FacebookShareButton: FC<FacebookShareButtonProps>

  interface TwitterShareButtonProps extends ShareButtonProps {
    /** Title of the shared page */
    title?: string
    via?: string
    hashtags?: string[]
    /** Accounts to recommend following */
    related?: string[]
  }
  declare const TwitterShareButton: FC<TwitterShareButtonProps>

  interface EmailShareButtonProps extends ShareButtonProps {
    /** Title of the shared page */
    subject?: string
    /** Email, will be prepended to the url. */
    body?: string
    /** Separates body from the url */
    separator?: string
  }
  declare const EmailShareButton: FC<EmailShareButtonProps>

  interface PinterestShareButtonProps extends ShareButtonProps {
    /** An absolute link to the image that will be pinned */
    media: string
    /** Description for the shared media. */
    description?: string
  }
  declare const PinterestShareButton: FC<PinterestShareButtonProps>

  interface IconProps {
    /**  Icon size in pixels */
    size?: number
    /** Whether to show round or rect icons */
    round?: boolean
    /** Allow rounded corners if using rect icons */
    borderRadius?: number
    /** customize background style, e.g. fill */
    bgStyle?: Record<string, string>
    /**  customize icon fill color */
    iconFillColor?: string
  }
  declare const TwitterIcon: FC<IconProps>
  declare const FacebookIcon: FC<IconProps>
  declare const EmailIcon: FC<IconProps>
  declare const PinterestIcon: FC<IconProps>

  interface ShareCountProps {
    url: string
    className?: string
  }
  declare const FacebookShareCount: FC<ShareCountProps>
  declare const PinterestShareCount: FC<ShareCountProps>

  export {
    FacebookShareButton,
    TwitterShareButton,
    EmailShareButton,
    PinterestShareButton,
    TwitterIcon,
    FacebookIcon,
    EmailIcon,
    PinterestIcon,
    PinterestShareCount,
    FacebookShareCount,
  }
}

Using FC is somewhat a point of contention for some, but it's an easy way to require the props.

[YutaUra]

This issue appears to be resolved, so it looks good to close