POLITICO Interactive Style

<Share
  subject="POLITICO: Story Headline For E-Mail"
  body="Story Headline For Share Tweet"
/>

<Share
  subject="POLITICO: Story Headline For E-Mail"
  body="Story Headline For Share Tweet"
/>

Import

import Share from '@politico/interactive-style/src/components/Share';
// or
import { Share } from '@politico/interactive-style';

Props

Name	Type	Description
subject	string	The subject line to use in emails
body	string	The body to use in emails and Tweets
onFb	function	Click handler for clicking the Facebook share button
onTwitter	function	Click handler for clicking the Twitter share button
onMail	function	Click handler for clicking the mail button

CSS

Name	Global Class	Description
root	PibShare-root	Styles applied to root div
button	PibShare-button	Styles applied to each button

Demos

Email/Tweet Text

You can set the default text for an email or tweet when a user clicks the button. "Body" will be used for email bodies and Tweet texts. "Subject" will be used for email subject lines. Try changing the text in the code and clicking the button to see it take effect.

<Share
  subject="TK Subject TK"
  body="TK Body Tk"
/>
    
<Share
  subject="TK Subject TK"
  body="TK Body Tk"
/>
    

Custom Click Handlers

You can pass custom click handlers for each event. Note that handlers fire before the usual before takes place (i.e. the alert will fire before the Twitter share link opens). Try clicking a button to see the handler fire.

<Share
  subject="TK Subject TK"
  body="TK Body Tk"
  onFb={() => {alert('You clicked FaceBook!')}}
  onTwitter={() => {alert('You clicked Twitter!')}}
  onMail={() => {alert('You clicked Mail!')}}
/>
    
<Share
  subject="TK Subject TK"
  body="TK Body Tk"
  onFb={() => {alert('You clicked FaceBook!')}}
  onTwitter={() => {alert('You clicked Twitter!')}}
  onMail={() => {alert('You clicked Mail!')}}
/>
    