react-contribution-viewer

• It just simple github contribution viewer

Installation

• react-contribution-viewer will be available via either npm and yarn.

npm install react-contribution-viewer
# or
yarn add react-contribution-viewer

Usage - React

• After installation, you can use react-contribution-viewer component in your React application:

import React from 'react';
import { DarkModeDispatch } from '@contexts/darkModeContext';
import ContributionViewer from 'react-contribution-viewer';

export default function MyContributionViewer() {
  const { darkModeState } = React.useContext(DarkModeDispatch);
  const isDark = React.useMemo(
    () => darkModeState.isDark,
    [darkModeState.isDark],
  );
  
  return (
    <ContributionViewer
      username="woohyun1031"
      isDark={isDark}
      isHeader
      renderHeader={(total) => (
        <div>
          <span>
            {total}
          </span>
          <span>            
            contributions in the last year
          </span>
        </div>
      )}
    />
  );
}

Usage - Next.js (App Router)

• Basically utilizing client-side components, but can seamlessly use data fetched from the server without requiring client-side fetching

// RSC

export type TContributionDayType = {
  contributionCount: number;
  date: string; // "2024-10-31"
};

export type TContributionWeekType = {
  contributionDays: Array<TContributionDayType>;
};

export interface IContributionInfo {
  totalContributions: number;
  weeks: Array<TContributionWeekType>;
}

export default async function Page() {
  const res = await getContributionList<IContributionInfo>('woohyun1031');
  const data = await res.json();

  return <ContributionTable serverData={data} />
}