Skip to content

Latest commit

 

History

History
78 lines (63 loc) · 2.23 KB

README.md

File metadata and controls

78 lines (63 loc) · 2.23 KB

Počítadlo Líbí se React component

React component for easier integration of the Líbí se social button by Seznam.cz.

Usage

First make sure you load the client script in the browser:

// Import the client script URL
import {BUTTON_SCRIPT_URL} from '@seznam/pocitadlo-libi-se-react'

// Add the following JSX snippet to the React component you use to render the
// <body> element or the <head> element:

<script src={BUTTON_SCRIPT_URL} async/>

// You may, optionally, also include the default styling provided by the
// '@seznam/pocitadlo-libi-se-common' package (a dependency of this package, it
// will be installed automatically). The styling will be used until the client
// script loads.
<link
  rel="stylesheet"
  href={
    // Replace the path below to the actual path on which the file will be
    // available in your project, or add the file to your styles bundle.
    'node_modules/@seznam/pocitadlo-libi-se-common/pocitadlolibise.css'
  }
/>

Now you may put a Líbí se button anywhere on your site (multiple vote buttons on single page are supported):

import PocitadloLibiSe from '@seznam/pocitadlo-libi-se-react'

// Put the following JSX snippet into any React component you want to render the
// social button:

<PocitadloLibiSe entity={entityUrl}/>

// Replace entityUrl with URL to the entity (article, video, ...) you want the
// votes counted on, e.g. "https://some-site.com/example-article".

There are multiple customization options at your disposal:

import {
  ButtonColorVariable,
  ButtonLayout,
  ButtonSize,
} from '@seznam/pocitadlo-libi-se-react'

<PocitadloLibiSe
  entity={entityUrl}
  layout={ButtonLayout.BOX_COUNT}
  size={ButtonSize.LARGE}
  colors={{
    [ButtonColorVariable.PRIMARY_COLOR]: '#222',
    [ButtonColorVariable.BACKGROUND_COLOR]: 'transparent',
    [ButtonColorVariable.HOVER_COLOR]: '#878787',
    [ButtonColorVariable.COUNT_COLOR]: '#757575',
    [ButtonColorVariable.ACTIVE_COLOR]: '#de0000',
  }}
  analytics={{
    payload: analyticsPayload, // Any JSON-serializable data
    position: 'optional information about the location of the button on page',
  }}
  placeholderHTML={`
    <span class="placeholder">
      HTML content shown until the client script loads
    </span>
  `}
/>