tessl/npm-primereact

Comprehensive React UI component library with 118+ components for building modern web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Icons & Theming

Name: tessl/npm-primereact
Author: tessl

Built-in SVG icon components and comprehensive theming system with CSS variables and passthrough customization.

Capabilities

Icon System

PrimeReact includes 47 built-in SVG icon components for common UI interactions and states.

/**
 * Base icon component interface
 * @param props - Icon configuration options
 * @returns JSX element
 */
interface IconProps {
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Click event handler */
  onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
  /** Icon spin animation */
  spin?: boolean;
}

/**
 * Base icon component
 * @param props - IconBase configuration options
 * @returns JSX element
 */
function IconBase(props: IconBaseProps): JSX.Element;

interface IconBaseProps extends IconProps {
  /** SVG path data */
  pathData?: string;
  /** ViewBox dimensions */
  viewBox?: string;
}

Available Icons

All icon components follow the same interface and naming pattern:

// Navigation Icons
function AngleDownIcon(props: IconProps): JSX.Element;
function AngleLeftIcon(props: IconProps): JSX.Element;
function AngleRightIcon(props: IconProps): JSX.Element;
function AngleUpIcon(props: IconProps): JSX.Element;
function AngleDoubleDownIcon(props: IconProps): JSX.Element;
function AngleDoubleLeftIcon(props: IconProps): JSX.Element;
function AngleDoubleRightIcon(props: IconProps): JSX.Element;
function AngleDoubleUpIcon(props: IconProps): JSX.Element;
function ChevronDownIcon(props: IconProps): JSX.Element;
function ChevronLeftIcon(props: IconProps): JSX.Element;
function ChevronRightIcon(props: IconProps): JSX.Element;
function ChevronUpIcon(props: IconProps): JSX.Element;
function ArrowDownIcon(props: IconProps): JSX.Element;
function ArrowUpIcon(props: IconProps): JSX.Element;

// Action Icons
function CheckIcon(props: IconProps): JSX.Element;
function TimesIcon(props: IconProps): JSX.Element;
function PlusIcon(props: IconProps): JSX.Element;
function MinusIcon(props: IconProps): JSX.Element;
function SearchIcon(props: IconProps): JSX.Element;
function SearchPlusIcon(props: IconProps): JSX.Element;
function SearchMinusIcon(props: IconProps): JSX.Element;
function RefreshIcon(props: IconProps): JSX.Element;
function PencilIcon(props: IconProps): JSX.Element;
function TrashIcon(props: IconProps): JSX.Element;
function UndoIcon(props: IconProps): JSX.Element;
function UploadIcon(props: IconProps): JSX.Element;

// Status Icons
function BanIcon(props: IconProps): JSX.Element;
function ExclamationTriangleIcon(props: IconProps): JSX.Element;
function InfoCircleIcon(props: IconProps): JSX.Element;
function TimesCircleIcon(props: IconProps): JSX.Element;
function SpinnerIcon(props: IconProps): JSX.Element;

// UI Icons
function BarsIcon(props: IconProps): JSX.Element;
function CalendarIcon(props: IconProps): JSX.Element;
function EyeIcon(props: IconProps): JSX.Element;
function EyeSlashIcon(props: IconProps): JSX.Element;
function FilterIcon(props: IconProps): JSX.Element;
function FilterSlashIcon(props: IconProps): JSX.Element;
function StarIcon(props: IconProps): JSX.Element;
function StarFillIcon(props: IconProps): JSX.Element;
function ThLargeIcon(props: IconProps): JSX.Element;
function WindowMaximizeIcon(props: IconProps): JSX.Element;
function WindowMinimizeIcon(props: IconProps): JSX.Element;

// Sort Icons
function SortAltIcon(props: IconProps): JSX.Element;
function SortAmountDownIcon(props: IconProps): JSX.Element;
function SortAmountUpAltIcon(props: IconProps): JSX.Element;

Usage Examples:

import { SearchIcon, PlusIcon, CheckIcon } from "primereact/icons/search";
import { PlusIcon } from "primereact/icons/plus";
import { CheckIcon } from "primereact/icons/check";

// Basic icon usage
<SearchIcon />

// Icon with custom styling
<PlusIcon className="text-blue-500" style={{ fontSize: '1.5rem' }} />

// Icon with click handler
<CheckIcon onClick={() => console.log('Checked!')} />

// Spinning icon
<SpinnerIcon spin />

Passthrough System

Comprehensive theming system allowing deep customization of component DOM structure and styling.

/**
 * Global passthrough configuration interface
 */
interface PassThroughOptions {
  /** Root element customization */
  root?: PassThroughType<object>;
  /** Input element customization */
  input?: PassThroughType<object>;
  /** Panel element customization */
  panel?: PassThroughType<object>;
  /** Header element customization */
  header?: PassThroughType<object>;
  /** Content element customization */
  content?: PassThroughType<object>;
  /** Footer element customization */
  footer?: PassThroughType<object>;
  /** Custom element customization */
  [key: string]: PassThroughType<object> | undefined;
}

/**
 * Passthrough type supporting static values or dynamic functions
 */
type PassThroughType<T> = T | ((options: PassThroughMethodOptions) => T);

/**
 * Context provided to passthrough functions
 */
interface PassThroughMethodOptions {
  /** Component props */
  props: any;
  /** Component state */
  state: any;
  /** Component context */
  context: any;
  /** Parent component info */
  parent: {
    props: any;
    state: any;
    context: any;
  };
  /** Global configuration */
  global: {
    ptOptions: any;
  };
}

/**
 * Global passthrough configuration
 */
interface PrimeReactPTOptions {
  /** Merge strategy for passthrough objects */
  mergeProps?: boolean;
  /** CSS transition class names */
  cssTransition?: {
    /** Timeout duration */
    timeout?: number;
    /** CSS class names for transition states */
    classNames?: {
      appear?: string;
      appearActive?: string;
      appearDone?: string;
      enter?: string;
      enterActive?: string;
      enterDone?: string;
      exit?: string;
      exitActive?: string;
      exitDone?: string;
    };
  };
}

Usage Examples:

import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";

// Basic passthrough usage
<Button 
  label="Submit"
  pt={{
    root: { className: 'my-custom-button' },
    label: { style: { color: 'red' } }
  }}
/>

// Dynamic passthrough with function
<InputText
  pt={{
    root: ({ props, state }) => ({
      className: `custom-input ${props.invalid ? 'invalid' : ''}`,
      'data-state': state.focused ? 'focused' : 'blurred'
    })
  }}
/>

// Global passthrough configuration
import { PrimeReactAPI } from "primereact/api";

PrimeReactAPI.ptOptions = {
  mergeProps: true,
  cssTransition: {
    timeout: 300,
    classNames: {
      enter: 'fade-enter',
      enterActive: 'fade-enter-active',
      exit: 'fade-exit',
      exitActive: 'fade-exit-active'
    }
  }
};

Tailwind Integration

Pre-configured Tailwind CSS passthrough options for rapid styling with utility classes.

/**
 * Tailwind CSS passthrough configuration
 */
interface TailwindPassThrough {
  /** Global Tailwind passthrough options */
  global?: PassThroughOptions;
  /** Component-specific Tailwind options */
  [componentName: string]: PassThroughOptions;
}

/**
 * Import Tailwind passthrough configuration
 */
import { Tailwind } from "primereact/passthrough/tailwind";

Usage Examples:

import { PrimeReactAPI } from "primereact/api";
import { Tailwind } from "primereact/passthrough/tailwind";

// Apply Tailwind passthrough globally
PrimeReactAPI.ptOptions = {
  pt: Tailwind
};

// Or apply to specific components
<Button 
  label="Tailwind Button"
  pt={Tailwind.button}
/>

Theme Configuration

Global theming system with CSS variables and styled/unstyled modes.

/**
 * Theme configuration interface
 */
interface ThemeConfiguration {
  /** Theme name */
  theme?: string;
  /** Unstyled mode */
  unstyled?: boolean;
  /** CSS module support */
  cssModule?: boolean;
  /** Theme CSS import */
  importTheme?: () => Promise<any>;
}

/**
 * Apply theme configuration
 */
interface PrimeReactThemeAPI {
  /** Current theme name */
  theme: string;
  /** Unstyled mode enabled */
  unstyled: boolean;
  /** Change theme dynamically */
  changeTheme: (currentTheme: string, newTheme: string, linkElementId?: string) => void;
}

Usage Examples:

// Enable unstyled mode
import { PrimeReactAPI } from "primereact/api";

PrimeReactAPI.unstyled = true;

// Dynamic theme switching
import { changeTheme } from "primereact/api";

// Switch from light to dark theme
changeTheme('saga-blue', 'vela-blue', 'theme-link');

// CSS Variables (in your CSS)
:root {
  --primary-color: #007ad9;
  --primary-color-text: #ffffff;
  --surface-0: #ffffff;
  --surface-50: #fafafa;
  --surface-100: #f5f5f5;
  /* ... more variables */
}

Styling Modes

PrimeReact supports multiple styling approaches for maximum flexibility.

/**
 * Styling mode configuration
 */
interface StylingMode {
  /** Styled mode with themes */
  styled?: {
    /** Theme name */
    theme: string;
    /** Theme CSS URL */
    url?: string;
  };
  /** Unstyled mode with custom CSS */
  unstyled?: {
    /** Passthrough options */
    pt?: PassThroughOptions;
    /** CSS module classes */
    cx?: (classes: string[]) => string;
  };
}

Available Themes:

Light Themes: saga-blue, saga-green, saga-orange, saga-purple
Dark Themes: vela-blue, vela-green, vela-orange, vela-purple
Material Design: md-light-indigo, md-light-deeppurple, md-dark-indigo, md-dark-deeppurple
Bootstrap: bootstrap4-light-blue, bootstrap4-light-purple, bootstrap4-dark-blue, bootstrap4-dark-purple
Custom: Fully customizable with CSS variables

CSS Import Examples:

// Theme CSS imports
import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

// Or dynamic import
const loadTheme = async (theme: string) => {
  await import(`primereact/resources/themes/${theme}/theme.css`);
};

Install with Tessl CLI