@ta-interaktiv/react-share-buttons

React Share Buttons

Renders a collection of social sharing buttons.

Installation

yarn add @ta-interaktiv/react-share-buttons

Usage

import React from 'react'
import ShareButtons, { displayTypes } from '@ta-interaktiv/react-share-buttons'

//...

class YourComponent extends React.Component {
  render() {
    return (
      <ShareButtons
        hashtags={['TAGrafik', 'ddj']}
        displayType={displayTypes.HORIZONTAL_ICONS}
      />
    )
  }
}

API

Table of Contents

• notifyNewsnetShareCounter
  • Parameters
• notifyGoogleAnalytics
  • Parameters
• defaultClickHandler
  • Parameters
• displayTypes
  • Properties
• requestStatus
• PolymorphicShareButtons
  • Parameters
  • Examples
• ShareButtons
  • Parameters
• shareItem
• minimumShares
• ShareItem
  • Parameters
• supportedCommunities
• getDefaultUrl
• cleanUrl
  • Parameters

notifyNewsnetShareCounter

Notifies the Newsnet Share Counter

Parameters

• articleId string
• shareTypeId string

notifyGoogleAnalytics

Push social shares to Google Tag Manager Data Layer

Parameters

• articleId string
• url string The URL that is being shared
• socialNetwork CommunityType Shared over twitter, facebook, mail?

defaultClickHandler

The default click handler will call the share counting REST API upon clicking the buttons.

Parameters

• articleId string The ID of the article.
• community Community A community object, as provided by the Newsnet API
• event object The react event object.

Returns void

displayTypes

Virtual enums – used to define the different forms a sharing button/icon can take when being shown.

Properties

• HORIZONTAL_ICONS string Share buttons displayed as horizontally aligned icons.
• VERTICAL_BUTTONS string Share buttons displayed as vertically stacked buttons.
• HORIZONTAL_BUTTONS string – Share buttons displayed as horizontal small grouped icons

The subdomain to use for the call to the Newsnet API.

Type: string

requestStatus

Enum states for the loading process.

PolymorphicShareButtons

Extends Component

These share buttons can be provided with an article ID. They will then use the Newsnet API to gather the correct links and share counters.

Parameters

• props object
  • props.articleID string The article ID of the main / link article in the CD. Used to get the appropriate share URLs and counts.
  • props.clickHandler clickHandler? An action to execute when the button is clicked. Defaults to a call to the share button counter API endpoint.
  • props.displayType {VERTICAL_BUTTONS: string, HORIZONTAL_ICONS: string} The display type, either horizontally aligned icons (with share counter) or vertically stacked buttons. Defaults to vertical buttons. (optional, default VERTICAL_BUTTONS)
  • props.inverted boolean Whether the list should be displayed on a dark background. (optional, default false)
  • props.hashtags Array<string>? A list of hashtags to tag the shared content with. Facebook will only accept the first value, so make it count.
  • props.additionalFacebookShares number? Manually add Facebook shares in case some of them got lost due to changing the canonical URL.

Examples

import PolymorphicShareButtons from
'@ta-interaktiv/react-polymorphic-share-buttons'

 class YourComponent extends React.Component {
  render() {
    return (
      <PolymorphicShareButtons
          articleID='34511213'
          hashtags={['TAGrafik', 'ddj']}
          displayType='horizontal icons'/>
    )
  }
}

ShareButtons

Renders social sharing buttons.

Parameters

• props ShareButtonsProps
  • props.displayType The display type, see displayTypes (optional, default VERTICAL_BUTTONS)
  • props.inverted For displaying the list on a dark background. (optional, default false)
  • props.communities Community objects, as provided by the External Services API service by Newsnet.
  • props.hashtags Hashtags as an array of strings. Facebook will only use the first one.
  • props.url The URL to share. The default window.location will be cleaned up and have any queries or hashes removed. In case you want to share an URL with a query or a hash (e.g. to jump to a part of the story directly), construct/clean the URL yourself and pass it in here. (optional, default window.location.href)
  • props.clickHandler The action that should be executed when the user clicks the link. The communities object is bound to this action, so that the type (or other infos) can be extracted from it. This design also means that in case of an API change the changes can be executed on the level of the polymorphic component. (optional, default noop)
  • props.className Additional class names to be passed to the link group.
  • props.itemClassName Additional class names to be passed into individual items.
  • props.additionalFacebookShares In case of Facebook share loss (e.g. when the canonical URL has been changed), you can provide additional shares via this property.

Returns React.Element<any>

shareItem

A single share button. This is usually not exposed, but is a sub-component of ShareButtons

Meta

• version: 1.1

minimumShares

Share count number is only being shown if greater than this constant.

Type: number

ShareItem

A share item is a single sharing item, consisting of a link with an icon. Using display types, this item can be displayed in different ways, either as a list item or as a button.

Parameters

• props ShareItemProps
  • props.displayType
  • props.inverted (optional, default false)
  • props.type
  • props.count
  • props.description
  • props.shareUrl
  • props.onClick (optional, default function(event){})
  • props.className (optional, default '')

Returns React.Element<"a">

supportedCommunities

The communities this setup currently supports (i.e. with icons or the shareActionFactory. Currently supports twitter, facebook, whatsapp and share.

getDefaultUrl

Get the current window.location and clean it up, returning only the origin and pathname part of the URL.

Returns string A new URL string that only contains the origin and the pathname, removing all query strings and hashes

cleanUrl

Clean up an URL and remove all the cruft that is being added by the native apps.

Parameters

• url string

Returns string A new URL string that only contains the origin and the pathname, removing all query strings and hashes