koji-react-leaderboard
v0.0.4
Published
React Render Prop Components that fetch and save Leaderboard data to and from the Koji Backend.
Downloads
8
Readme
🦋 koji-react-leaderboard
React Render Prop Components that fetch and save Leaderboard data to and from the Koji Backend.
📦 Install
npm install -S koji-react-leaderboard
📚 Library
Please Note: This library is made only for those Koji users who have Koji Leaderboard API already setup on the Koji Backend.
- GetLeaderboard React Component
- SaveToLeaderboard React Component
🖥️ Usage
<GetLeaderboard />
Component
Props
kojiLeaderboardBackendUri
👉 (required) The Koji backend URL that has Koji Leaderboard API activated.eg. Koji.config.serviceMap.backend
endpoint
👉 (optional) The backend endpoint that you want to hit to get the Leaderboard Data.Default: 'leaderboard'
Example
import React, { Component } from 'react'
import { GetLeaderboard } from 'koji-react-leaderboard'
class YourComponent extends Component {
render () {
return (
<GetLeaderboard kojiLeaderboardBackendUri="http://localhost:3333">
{(data, isLoading, isError) => {
if (data.scores && !isLoading && !isError) {
return (
<div className="container">
{ data.scores.map(({ name, score }, index) => (
<li key={index}>
Name: { name } | Score: { score }
</li>
)) }
</div>
)
}
if (data.error && !isLoading && isError) {
return <h2>Error occured. {data.error.message}</h2>
}
return <h2>Loading...</h2>
}}
</GetLeaderboard>
)
}
}
<SaveToLeaderboard />
Component
Props
kojiLeaderboardBackendUri
👉 (required) The Koji backend URL that has Koji Leaderboard API activated.eg. Koji.config.serviceMap.backend
endpoint
👉 (optional) The backend endpoint that you want to hit to save the Leaderboard Data.Default: 'leaderboard'
Example
import React, { Component } from 'react'
import { SaveToLeaderboard } from 'koji-react-leaderboard'
class YourComponent extends Component {
state = { data: null }
submitData = async (e, saveData) => {
e.preventDefault()
const response = await saveData({
name: 'ScreamerPlays',
score: 890,
})
this.setState({ data: response })
}
render() {
return (
<SaveToLeaderboard kojiLeaderboardBackendUri="http://localhost:3333">
{(saveData, isLoading, isError) => {
return (
<React.Fragment>
<button onClick={e => this.submitData(e, saveData)}>Submit data</button>
{isLoading && <h2>Loading...</h2>}
{isError && <h2>Error</h2>}
</React.Fragment>
)
}}
</SaveToLeaderboard>
)
}
}
📝 License
MIT © Kumar Abhirup Follow me 👋 on Twitter →