README

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>
  `}
/>

Usage no npm install needed!

README

Počítadlo Líbí se React component

Usage