Skip to content

Instantly share code, notes, and snippets.

@jem-computer
Forked from jamesslock/ShareButton.jsx
Created May 17, 2016 16:54
Show Gist options
  • Select an option

  • Save jem-computer/93461f3e6b0855a17bd6bd36155646a3 to your computer and use it in GitHub Desktop.

Select an option

Save jem-computer/93461f3e6b0855a17bd6bd36155646a3 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>
@infacq

infacq commented Mar 20, 2017

Copy link
Copy Markdown

Is there any screenshot?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment