https://github.com/marvinschopf/react-highfive
👋 react-highfive is a simple React ⚛️ component that can be used to integrate an animated high-five counter into a website.
https://github.com/marvinschopf/react-highfive
highfive react reactjs
Last synced: 3 months ago
JSON representation
👋 react-highfive is a simple React ⚛️ component that can be used to integrate an animated high-five counter into a website.
- Host: GitHub
- URL: https://github.com/marvinschopf/react-highfive
- Owner: marvinschopf
- License: apache-2.0
- Created: 2021-01-31T21:54:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-02T05:07:20.000Z (almost 5 years ago)
- Last Synced: 2025-08-09T14:29:50.655Z (12 months ago)
- Topics: highfive, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 314 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
npm install react-highfive
```
Using yarn:
```bash
yarn add react-highfive
```
## Usage
### Basic example
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(
)
}
```
### Example with synchronisation
```JSX
import React from "react";
import HighFive from "react-highfive";
export default function App() {
return(
)
}
```
### Example with custom position
```JSX
import React from "react";
import HighFive from "react-highfive";
export default function App() {
return(
)
}
```
## 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` |