React High Five 👋

react-highfive is a simple React ⚛️ component that can be used to integrate an animated high-five counter into a website.

The counter is synchronised, so the number goes up for all users on the website at the same time when someone gives a high five! 👋

Installation

Using npm:

npm install react-highfive

Using yarn:

yarn add react-highfive

Usage

Basic example

The following is a simple example that is not synchronised with any server.

import React from "react";
import HighFive from "react-highfive";

export default function App() {
    return(
        <div className="App">
            <HighFive />
        </div>
    )
}

Example with synchronisation

import React from "react";
import HighFive from "react-highfive";

export default function App() {
    return(
        <div className="App">
            <HighFive fetchUrl="http://localhost/get" updateUrl="http://localhost/update" />
        </div>
    )
}

Example with custom position

import React from "react";
import HighFive from "react-highfive";

export default function App() {
    return(
        <div className="App">
            <HighFive position={{horizontal: "right", vertical: "top"}} />
        </div>
    )
}

Options

The following options can be passed as parameters to the HighFive object:

Option	Description	Default
fetchUrl	URL to retrieve the current counter value	false
updateUrl	URL to increase the counter value	false
refreshRate	Frequency in miliseconds at which the counter is updated	1000
position	Determines the position of the snack bar	-
position.horizontal	"right" \| "left" \| "center"	right
position.vertical	"bottom" \| "top"	bottom