Skip to content

Instantly share code, notes, and snippets.

@jamesslock
Last active May 17, 2016 21:05
Show Gist options
  • Save jamesslock/4241cad06792a0b2e48eeabf9d52b89d to your computer and use it in GitHub Desktop.
Save jamesslock/4241cad06792a0b2e48eeabf9d52b89d to your computer and use it in GitHub Desktop.
ReactJS Share Buttons
import React, { PropTypes } from 'react';
import Button from '../components/Button.jsx';
import Icon from '../components/Icon.jsx';
module.exports = React.createClass({
render: function () {
const {
className,
classNameIcon,
children,
shareText,
shareUrl,
shareLocation,
sharePlatform,
} = this.props;
// Builds the classes for the Button styles
const buttonClassName = [
"btn",
"btn--" + sharePlatform, // Takes sharePlatform and builds platform specific styles example: btn--twitter
className,
].join(' ');
// Builds the classes for the Icon styles
const iconClassName = [
"icon",
"btn__icon--left",
"icon--" + sharePlatform, // Takes sharePlatform and builds platform specific styles example: icon--twitter
classNameIcon, // Allows sizes and other props to be passed down to style icons
].join(' ');
// Builds the share Button tracking example: ?share=twitterForceShare
const shareTracking = [
shareUrl,
"?share=",
sharePlatform,
shareLocation,
].join('');
// Facebook share generation
const shareFacebook = [
"https://www.facebook.com/sharer/sharer.php?u=",
shareTracking,
].join('');
// Twitter share generation
const shareTwitter = [
"https://twitter.com/intent/tweet?text=",
shareText + " ", // Adds a space after text to avoid joining with url
shareTracking,
"&source=unrollme",
"&related=unrollme",
].join('');
return
sharePlatform === 'facebook' ?
<Button
className={buttonClassName}
href={shareFacebook}
buttonType="link"
>
<Icon className={iconClassName}/>
{children}
</Button>
: sharePlatform === 'twitter' ?
<Button
className={buttonClassName}
href={shareTwitter}
buttonType="link"
>
<Icon className={iconClassName}/>
{children}
</Button>
: null
}
});
// Example ShareButton Component
// <ShareButton shareText="Hey guys checkout this awesome service @unrollme"
// shareUrl="https://unroll.me"
// shareLocation="ForceShare"
// sharePlatform="facebook">
// Share on Facebook
// </ShareButton>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment