Skip to main content

React Achievements

React Achievements adds gamification to React apps with progress tracking, unlock notifications, confetti, and a ready-made achievement widget.

v4 Happy Path​

import {
  AchievementProvider,
  AchievementsWidget,
  useSimpleAchievements,
} from 'react-achievements';

const achievements = {
  score: {
    100: { title: 'Century!', description: 'Score 100 points', icon: '🏆' },
  },
};

function Game() {
  const { track } = useSimpleAchievements();
  return <button onClick={() => track('score', 100)}>Score 100</button>;
}

export default function App() {
  return (
    <AchievementProvider achievements={achievements}>
      <Game />
      <AchievementsWidget />
    </AchievementProvider>
  );
}

What You Get​

  • A Simple API for numeric, boolean, string, and custom-condition achievements
  • Built-in notifications and confetti by default
  • AchievementsWidget for badge button plus modal
  • AchievementsList for drawers, sidebars, and settings pages
  • Compact square badge grids for dense achievement catalogs
  • Modal controls for backdrop blur and hidden scrollbar chrome
  • Event-based tracking through AchievementEngine
  • A DOM-free /headless entry point for custom UI and React Native preparation

Next Steps​