Skip to main content

User rank

UserRankView displays a leaderboard: the top three users on a podium with medals, followed by a table of the remaining ranks with avatars, scores, and locations.

Example

<UserRankView
  rank={[
    {
      avatar: 'https://github.com/idea2app.png',
      id: 1,
      name: 'idea2app',
      score: 980
    },
    {
      avatar: 'https://github.com/mdo.png',
      id: 2,
      name: 'mdo',
      score: 870
    },
    {
      avatar: 'https://github.com/twbs.png',
      id: 3,
      name: 'twbs',
      score: 760
    },
    {
      avatar: 'https://github.com/octocat.png',
      id: 4,
      name: 'octocat',
      score: 650
    },
    {
      avatar: 'https://github.com/github.png',
      id: 5,
      name: 'github',
      score: 540
    }
  ]}
  title="Contributors"
/>

Usage

<UserRankView title="Weekly ranking" rank={users} linkOf={({ id }) => `/users/${id}`} />

rank lists users ordered by score; the first three render as medal cards and ranks 4–10 render as table rows. linkOf builds the profile link for each user, and address fields from UserAddressProps display each user's location.