How to implement share to twitter with react js

Question

I want to let users share images from my website to twitter.

I used this module react-share to implement this.But it doesn't give an option to share images.

My code looks likes this.

import { ShareButtons, ShareCounts, generateShareIcon, } from 'react-share';

const {
    FacebookShareButton,
    GooglePlusShareButton,
    LinkedinShareButton,
    TwitterShareButton,
    PinterestShareButton,
    VKShareButton,
} = ShareButtons;

<TwitterShareButton
    url={shareUrl}
    title={title}
    className="shareBtn col-md-1 col-sm-1 col-xs-1">
    <a className="twitter"><i className="fa fa-twitter" aria-hidden="true"></i></a>
</TwitterShareButton>

Please help me fix this on how to share images to twitter.

Answer 1

Please add <TwitterIcon> in your code

<TwitterShareButton
        url={shareUrl}
        title={title}
        className="Demo__some-network__share-button">
        <TwitterIcon
          size={32}
          round />
      </TwitterShareButton>

Answer 2

react-share does not support image uploading. You can only share url, title and hashtags with TwitterShareButton. Main image of page will be showed when you add url.

Also your icon is missing, this is how you can add icon.

<TwitterShareButton url={url} title={title}>
    <button className="btn btn-circle">
        <i className="fab fa-twitter"> </i>
    </button>
</TwitterShareButton>

Answer 3

Correct answer is that you need to pass a child (Icon) to the ShareButton and also IMPORT it.

Example:

    import React, { Component } from "react";
    import {
      TwitterShareButton,
      TwitterIcon,
    } from "react-share";
    class Quotes extends Component {
    
     render() {
return( <div>
     <TwitterShareButton
              title="Hello"
             url="https://stackoverflow.com/"
            >
             
              <TwitterIcon size={32} round />
            </TwitterShareButton>    

</div>
       )
    }
 }

It's a very nice tool.

Answer 4

You can not share rich content to twitter using this widget, only way is to host your image on static url and share that url via TwitterShareButton

Sample react-share code snippet at https://samvikshana.weebly.com/blog/react-share-social-share-widgets