@ta-interaktiv/react-polymorphic-share-buttons

Polymorphic Sharing Buttons

Renders a collection of social sharing buttons, accessing the Newsnet API to get the relevant data of the defined article.

Installation

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

API

PolymorphicShareButtons

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.

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'/>
    )
  }
}

Meta

• version: 1.1

PolymorphicShareButtons

Extends React.Component

Share buttons that are configured using the Newsnet API, using the article ID

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.

community

The community object as provided by the Newsnet API.

Type: Object

Properties

• type string The identifier of the community (i.e. 'facebook' or 'twitter')
• count number The number of shares of this type.
• share_type_id string A GUID that links article and community type.
• url string The canonical URL of the article that should be used for sharing this article.
• name string? The front facing name of the community.
• title string? The title of the article for sharing.
• description string? The call to action for the community.
• facebook_id string? The Facebook App ID.
• via string? The via account name to use on Twitter.

requestStatus

Enum states for the loading process.

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

clickHandler

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

Type: Function

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.

Remarks

Fallback

In case the article with the given ID can't be found, the component will fall back to sensible defaults and still provide sharing buttons.

Display Type

Currently available values:

• 'horizontal icons'
• 'vertical buttons'
• 'horizontal buttons'