kumarabhirup / koji-react-leaderboard

React Render Prop Components that fetch and save Leaderboard data to and from the Koji Backend

🦋 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 →