@seznam/pocitadlo-libi-se-react
v1.0.1
Published
Integration for the social Líbí se button by Seznam.cz for React-powered apps.
Downloads
17
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>
`}
/>