tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview

Eval results

Files

Type Definitions

Name: tessl/npm-tremor--react
Author: tessl

Comprehensive TypeScript types exported by Tremor. See common-props.md for consolidated type definitions.

All types are exported from main package:

import {
  // Value formatting
  type ValueFormatter,

  // Chart types
  type CurveType,
  type IntervalType,
  type FunnelVariantType,
  type EventProps,
  type CustomTooltipProps,

  // Style types
  type Color,
  type CustomColor,
  type Size,

  // Icon & Button types
  type IconVariant,
  type ButtonVariant,

  // Delta types
  type DeltaType,

  // Layout types
  type FlexDirection,
  type JustifyContent,
  type AlignItems,

  // Utility functions
  getIsBaseColor,
} from '@tremor/react';

Quick Reference

Common Formatters

// Currency
const usd: ValueFormatter = (v) => `$${v.toLocaleString()}`;
const eur: ValueFormatter = (v) => new Intl.NumberFormat('en-DE', { style: 'currency', currency: 'EUR' }).format(v);

// Percentage
const percent: ValueFormatter = (v) => `${v.toFixed(2)}%`;

// Compact
const compact: ValueFormatter = (v) => {
  if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
  if (v >= 1e3) return `${(v / 1e3).toFixed(1)}K`;
  return v.toString();
};

Color Selection Helper

import type { Color } from '@tremor/react';

function getStatusColor(status: string): Color {
  const map: Record<string, Color> = {
    success: 'emerald',
    warning: 'amber',
    error: 'red',
    info: 'blue',
    pending: 'gray',
  };
  return map[status] || 'gray';
}

Delta Type Calculator

import type { DeltaType } from '@tremor/react';

function calculateDeltaType(change: number): DeltaType {
  if (change === 0) return 'unchanged';
  if (change > 0) return change >= 10 ? 'increase' : 'moderateIncrease';
  return change <= -10 ? 'decrease' : 'moderateDecrease';
}

Type-Safe Component Props

import type { Color, Size, ValueFormatter } from '@tremor/react';

interface DashboardCardProps {
  title: string;
  data: any[];
  color: Color;
  size?: Size;
  formatter?: ValueFormatter;
}

function DashboardCard({ title, data, color, size = 'md', formatter }: DashboardCardProps) {
  return (
    <Card>
      <Title>{title}</Title>
      <BarChart
        data={data}
        index="name"
        categories={['value']}
        colors={[color]}
        valueFormatter={formatter}
      />
    </Card>
  );
}

Utility: getIsBaseColor

function getIsBaseColor(color: Color | string): boolean;

Checks if color is from Tremor base palette (returns true) or custom (returns false).

Usage:

import { getIsBaseColor } from '@tremor/react';

getIsBaseColor('blue'); // true
getIsBaseColor('#3B82F6'); // false
getIsBaseColor('rgb(34, 197, 94)'); // false

// Conditional styling
function CustomComponent({ color }: { color: string }) {
  if (getIsBaseColor(color)) {
    return <div className={`bg-${color}-500`}>Theme color</div>;
  }
  return <div style={{ backgroundColor: color }}>Custom color</div>;
}

TypeScript Integration

Tremor is fully typed with excellent TypeScript support:

import { BarChart, type Color } from '@tremor/react';

// Type inference
const colors: Color[] = ['blue', 'emerald', 'violet'];

// Props are strongly typed
<BarChart
  data={data}
  index="month"
  categories={['revenue']}
  colors={colors} // Type-checked
  valueFormatter={(value: number) => `$${value}`} // Type-checked
  onValueChange={(event) => {
    // event is typed as EventProps
    if (event) {
      console.log(event.categoryClicked); // Type-safe
    }
  }}
/>