https://github.com/elitewise/react-native-ranking-leaderboard
Customizable and modern leaderboard component for React Native apps
https://github.com/elitewise/react-native-ranking-leaderboard
react-native react-native-component react-native-library react-native-package
Last synced: 3 days ago
JSON representation
Customizable and modern leaderboard component for React Native apps
- Host: GitHub
- URL: https://github.com/elitewise/react-native-ranking-leaderboard
- Owner: EliteWise
- License: mit
- Created: 2025-05-21T13:17:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-06-13T15:10:23.000Z (14 days ago)
- Last Synced: 2025-06-13T16:27:51.144Z (14 days ago)
- Topics: react-native, react-native-component, react-native-library, react-native-package
- Language: TypeScript
- Homepage:
- Size: 5.35 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🏆 react-native-ranking-leaderboard
**Customizable and modern leaderboard component for React Native apps.**
I’ve always been obsessed with rankings in games — So I decided to turn that obsession into the best leaderboard library.
## Features
- 🥇 **Podium** for top 3 users
- 📋 **Scrollable list**
- 👤 Tap a user to open their **profile**
- 🔍 **Search bar**
- 📆 **Weekly / Monthly rankings**
- 📈 **Rank change indicators** ↑ ↓
- 🎨 Fully customizable styles via props
## Preview
## Installation
```bash
yarn add react-native-ranking-leaderboard
# or
npm install react-native-ranking-leaderboard
```
## How to use it?
```ts
// Data must contain at least 'name' and 'points' fields
// 'sorting' field is only used for weekly or monthly rankings
const data = [
{
name: 'Alice', points: 1200, picture: 'https://example.com/alice.jpg',
sorting: [
{ points: 100, date: new Date(2025, 4, 1) },
{ points: 50, date: new Date(2025, 4, 2) },
],
},
{
name: 'Bob', points: 1100, picture: 'https://example.com/bob.jpg',
sorting: [
{ points: 80, date: new Date(2025, 4, 1) },
{ points: 60, date: new Date(2025, 4, 3) },
],
},
{
name: 'Charlie', points: 1000, picture: 'https://example.com/charlie.jpg',
sorting: [
{ points: 70, date: new Date(2025, 4, 1) },
],
},
{ name: 'Daisy', points: 950, picture: 'https://example.com/daisy.jpg' },
{ name: 'Ethan', points: 900 },
];
```
```tsx
```
## Advanced Props
```tsx
// Adding your custom profile component
type CustomProfileProps = {
user: LeaderboardEntry | null;
onClose: () => void;
};
const CustomProfile = ({ user, onClose }: CustomProfileProps) => {
if (!user) return null;
return (
Add anything you want! 🧡
);
}
}
/>
```
```tsx
// Customize Rank Difference
import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react-native';
const RankDifferenceIcon = (difference: number) => {
if (difference < 0) return ;
if (difference > 0) return ;
return ;
};
```
More features will come soon!
Made with passion by [EliteWise](https://github.com/EliteWise) 🧡