Function useUserRewards

Custom React hook to manage and fetch multiple user rewards based on optional parameters like projectId and rewardId.

This hook fetches user rewards data, handles caching, and provides methods for refreshing the data.

Example

import { useUserRewards } from 'react-playmakers';

const UserRewardsComponent: React.FC = () => {
  const { userRewards, fetched, refresh } = useUserRewards({ projectId: 'pXXXXXXXX' });

  useEffect(() => {
    if (!fetched) {
      console.log("Fetching user rewards...");
    }
  }, [fetched]);

  const handleRefresh = async () => {
    await refresh();
    console.log("User rewards refreshed.");
  };

  return (
    <div>
      {fetched ? (
        <div>
          <h2>User Rewards</h2>
          <ul>
            {userRewards.map((reward, index) => (
              <li key={index}>{reward.name}</li>
            ))}
          </ul>
        </div>
      ) : (
        <p>Loading...</p>
      )}
      <button onClick={handleRefresh}>Refresh Rewards</button>
    </div>
  );
};
Copy