Integrate sharethis in ReactJS

Question

I need to integrate sharethis in my reactjs application. I need that script to execute only in one component. Currently this is how I have implemented.

 componentWillMount() {
 const script = document.createElement("script");
 script.src ="//platform-api.sharethis.com/js/sharethis.js#property=242434664&product=sop?r=" +new Date().getTime();
 script.async = true;
 script.id = "shareThisId";
 document.body.appendChild(script);
}

The problem with this is since this component is mounted through react routing and page reload doesn't happen, the script doesn't re-execute.

I tried removing the script tag on componentWillUnmount lifecycle by using removeChild, but that still doesn't re-execute the script on mounting and I learnt that it happens because of this - The removed child node still exists in memory according to https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild.

Also, the script needs to re-execute on mount so that I get updated share count each time.

Answer 1

I work at sharethis, and we recently publish a reactjs plugin at https://www.npmjs.com/package/sharethis-reactjs. You can try to install and use it more conveniently.

Let me know if you have any issue while using it, and I'm happy to help.

Answer 2

Hao Xu, For what it's worth, I got tired of trying to make the "official" sharethis-reactjs package work...

You'll need to include the js in index.html

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=YOUR-PROPPERTY-KEY&product=inline-share-buttons' async='async'></script>

So this is what I wrote... you'll want to configure it your way of course

import React, {Component} from 'react'
import {isMobile} from 'react-device-detect';


export class ShareButtons extends Component{
    constructor(props){
        super(props);

        var defaultNetworks = isMobile  ? ['facebook', 'twitter', 'pinterest', 'googleplus', 'sharethis', 'sms', 'email'] 
                                        : ['facebook', 'twitter', 'pinterest', 'googleplus', 'sharethis',  'email'];

    this.state = {
        config: {
            id: this.props.id || 'sharethis-inline-buttons',
            networks: this.props.networks || defaultNetworks,
            alignment: this.props.alignment || "right",
            enabled: this.props.enabled !== 'false' || true,
            font_size: this.props.font_size || 11,
            padding: this.props.padding || 8,
            radius: this.props.radius || 20,
            networks: this.props.networks || defaultNetworks,
            size: this.props.size || 32,
            show_mobile_buttons: this.props.show_mobile_buttons !== 'false' || true,
            spacing: this.props.spacing || 2,
            url: this.props.url || window.location.href,
            title: this.props.title || document.title,
            image: this.props.image || "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
            description: this.props.description || document.getElementsByTagName('meta')["description"].content,
            username: this.props.username || "ChadSteele" // custom @username for twitter sharing
        }
    };



    }

    componentDidMount(){
        window.__sharethis__.load('inline-share-buttons', this.state.config);
    }

    render(){
        return <span id={this.state.config.id || 'sharethis-inline-buttons'}></span>
    }
}

export default ShareButtons;