react-highfive
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
Last updated
Was this helpful?