react-highfive v1.7.2

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: