How to implement share to twitter with react js

user_6493015 0
Viewed 13048

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.

twitter-share react-share reactjs twitter javascript
4 Answers

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>
user_52952100
user_69039740

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.

user_109151750
Related