Wondering what’s next for npm?Check out our public roadmap! »

    @seznam/pocitadlo-libi-se-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

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

    Install

    npm i @seznam/pocitadlo-libi-se-react

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    14.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar