Live and real-time counter widget

CxCounter is an open-source UI JavaScript library that lets you create a live and real-time animated counters for any events in your system using CxSense realtime and decision APIs.

This widget gets a live hit of an event in your system and updates the counter in an app in real time.

Before you start

This guide assumes you have created a free project account on CxSense. If you don't already have an account you can start by creating a free account and registering a web app to access your api_key and journey_id.

Getting started

Using the Counter package is as simple as adding this JavaScript code to your page.

import Counter from '@cxsense/counter'
let counter = Counter({
  apiKey: "your_api_key",
  journeyId: "your_journey_id",
  containerClassName: "counter__value", // class name of the DOM element to render the counter in
  buffer: 100, // buffer to the live number. Default is 0
  startingValue: 10,
  live: false,
  compact: false, // Compact presentation of numbers. Default is false
  duration: 5000  // Duration of animation in milliseconds. Default is 5000
})
counter.start()

This package renders the number in the container and gives you flexibility to render the counter with your own customised styles and themes.

Real-time listener

By default, real-time listener is disabled. Set live field to true and updates the counter when an event is triggered.

Installation

npm install @cxsense/counter
# or
yarn add @cxsense/counter

License

@cxsense/counter is MIT licensed.