liveusercount v1.0.9

get-live-count

The purpose of using this package is to show the live user count on the current app. It uses socket.io package for managing the live user count.

Live Demo

Demo url

Usage

install liveusercount package

npm i liveusercount

or add CDN link for liveusercount

<script src="https://res.cloudinary.com/de2smuykn/raw/upload/v1622716374/live_user_count.js"></script>

install the socket.io package

npm i socket.io

or add CDN link for socket.io

<script src="https://cdn.socket.io/4.0.0/socket.io.min.js" integrity="sha384-DkkWv9oJFWLIydBXXjkBWnG1/fuVhw8YPBq37uvvD6WSYRFRqr21eY5Dg9ZhmWdy" crossorigin="anonymous"></script>

VanillaJS Usage

<script>
    const config = {
            text: "Live user : ",
            backgroundColor: "black",
            textColor: "white",
            position: "absolute",
            top: "0px",
            left: "0px"
        }
        getLiveCount(config);
</script>

React Usage

go to user root component and inside the useEffect hook add call this function

import React from 'react';
import getLiveCount from 'liveusercount';
const RootComponent = () => {
    React.useEffect(() =>{
        const config = {
            text: "Live user : ",
            backgroundColor: "red",
            textColor: "white",
            position: "absolute",
            top: "0px",
            left: "0px"
        }
        getLiveCount(config);
    }, []);
    return (
        <div></div>
    );
};

export default RootComponent;

Any other module usage

import getLiveCount from 'liveusercount';
// you other code

// call in constructor or lifecycle method
    const config = {
        text: "Live user : ",
            backgroundColor: "black",
            textColor: "white",
            position: "absolute",
            top: "0px",
            left: "0px"
        }
    getLiveCount(config);

it will automatically generate the section for the live count on the top left of the page.

Customization

You can apply your own css on the class live-count-class.

and also you can configure some of its property in config object