@algoux/standard-ranklist-renderer-component-react

React components for rendering Standard Ranklist data.

Install

npm i -D @algoux/standard-ranklist
npm i -S @algoux/standard-ranklist-renderer-component-react @algoux/standard-ranklist-renderer-component-core @algoux/standard-ranklist-renderer-component-styles

Main Exports

• Ranklist
• ProgressBar
• Modal
• DefaultUserModal
• DefaultSolutionModal
• MarkerLabel

Usage

Import the shared stylesheet once in your app entry. Ranklist expects a static ranklist, so convert an SRK ranklist before rendering. User/status cell clicks are emitted as semantic payloads; use those payloads to open the default modals or your own UI.

import { useMemo, useState } from 'react';
import { convertToStaticRanklist } from '@algoux/standard-ranklist-renderer-component-core';
import {
  DefaultSolutionModal,
  DefaultUserModal,
  ProgressBar,
  Ranklist,
  type SolutionClickPayload,
  type UserClickPayload,
} from '@algoux/standard-ranklist-renderer-component-react';
import '@algoux/standard-ranklist-renderer-component-styles';

function Board({ ranklist }) {
  const staticRanklist = useMemo(() => convertToStaticRanklist(ranklist), [ranklist]);
  const [activeUser, setActiveUser] = useState<UserClickPayload | null>(null);
  const [activeSolution, setActiveSolution] = useState<SolutionClickPayload | null>(null);

  return (
    <>
      <ProgressBar data={ranklist} enableTimeTravel onTimeTravel={(time) => console.log(time)} />
      <Ranklist
        data={staticRanklist}
        stripedRows
        onUserClick={(payload) => {
          setActiveUser(payload);
          setActiveSolution(null);
        }}
        onSolutionClick={(payload) => {
          setActiveSolution(payload);
          setActiveUser(null);
        }}
      />
      <DefaultUserModal
        open={!!activeUser}
        user={activeUser?.user}
        markers={staticRanklist.markers}
        onClose={() => setActiveUser(null)}
      />
      <DefaultSolutionModal
        open={!!activeSolution}
        user={activeSolution?.user}
        problem={activeSolution?.problem}
        problemIndex={activeSolution?.problemIndex || 0}
        solutions={activeSolution?.solutions || []}
        onClose={() => setActiveSolution(null)}
      />
    </>
  );
}

Use Modal directly when you want custom modal content. Ranklist also accepts parts such as userCell and statusCell when you need to replace selected table cells while keeping the rest of the renderer.