# react-highfive

## React High Five 👋 <a href="#react-high-five" id="react-high-five"></a>

`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 <a href="#installation" id="installation"></a>

Using npm:

```bash
npm install react-highfive
```

Using yarn:

```bash
yarn add react-highfive
```

### Usage <a href="#usage" id="usage"></a>

#### Basic example <a href="#basic-example" id="basic-example"></a>

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

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

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

#### Example with synchronisation <a href="#example-with-synchronisation" id="example-with-synchronisation"></a>

```jsx
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 <a href="#example-with-custom-position" id="example-with-custom-position"></a>

```jsx
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 <a href="#options" id="options"></a>

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