CtrlK
BlogDocsLog inGet started
Tessl Logo

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

utilities-services.mddocs/

Utilities & Services

Core utilities, services, and helper components that provide foundational functionality across the library.

Capabilities

Global API Configuration

Central configuration system for PrimeReact library settings and behavior.

/**
 * Get or set global locale configuration
 * @param locale - Locale identifier (e.g., 'en', 'es', 'fr')
 */
function locale(locale?: string): string | void;

/**
 * Add custom locale configuration
 * @param locale - Locale identifier
 * @param options - Locale configuration object
 */
function addLocale(locale: string, options: LocaleOptions): void;

/**
 * Global PrimeReact API configuration object
 */
interface PrimeReactAPI {
  /** Global ripple effect toggle */
  ripple: boolean;
  /** Global input styling mode */
  inputStyle: 'outlined' | 'filled';
  /** Global locale setting */
  locale: string;
  /** Global append target for overlays */
  appendTo: HTMLElement | string | null;
  /** Automatic z-index management */
  autoZIndex: boolean;
  /** Base z-index value */
  zIndex: {
    modal: number;
    overlay: number;
    menu: number;
    tooltip: number;
  };
  /** Hide overlays on document scrolling */
  hideOverlaysOnDocumentScrolling: boolean;
  /** CSP nonce for inline styles */
  nonce: string | undefined;
  /** Null sort order for DataTable */
  nullSortOrder: 1 | -1;
  /** Global filter match mode options */
  filterMatchModeOptions: {
    text: FilterMatchModeOption[];
    numeric: FilterMatchModeOption[];
    date: FilterMatchModeOption[];
  };
}

interface LocaleOptions {
  firstDayOfWeek?: number;
  dayNames?: string[];
  dayNamesShort?: string[];
  dayNamesMin?: string[];
  monthNames?: string[];
  monthNamesShort?: string[];
  today?: string;
  clear?: string;
  dateFormat?: string;
  weekHeader?: string;
  [key: string]: any;
}

interface FilterMatchModeOption {
  label: string;
  value: string;
}

Usage Examples:

import { locale, addLocale, PrimeReactAPI } from "primereact/api";

// Set global locale
locale('en');

// Add custom locale
addLocale('custom', {
  firstDayOfWeek: 1,
  dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  today: 'Today',
  clear: 'Clear'
});

// Configure global settings
PrimeReactAPI.ripple = true;
PrimeReactAPI.inputStyle = 'outlined';
PrimeReactAPI.autoZIndex = true;

React Hooks

Custom React hooks for common functionality and lifecycle management.

/**
 * Hook for managing event listeners with cleanup
 * @param options - Event listener configuration
 */
function useEventListener(options: EventListenerOptions): void;

interface EventListenerOptions {
  type: string;
  listener: EventListener;
  target?: EventTarget | null;
  options?: boolean | AddEventListenerOptions;
}

/**
 * Hook that runs effect only on updates, not on mount
 * @param fn - Effect function
 * @param deps - Dependency array
 */
function useUpdateEffect(fn: () => void | (() => void), deps: React.DependencyList): void;

/**
 * Hook that returns the previous value of a variable
 * @param value - Current value
 * @returns Previous value
 */
function usePrevious<T>(value: T): T | undefined;

/**
 * Hook for detecting clicks outside a component
 * @param ref - Reference to the component element
 * @param callback - Function to call when outside click occurs
 */
function useClickOutside<T extends HTMLElement>(
  ref: React.RefObject<T>,
  callback: () => void
): void;

/**
 * Hook for managing resize event listeners
 * @param listener - Resize event handler
 * @param target - Target element (defaults to window)
 */
function useResizeListener(listener: () => void, target?: EventTarget): void;

/**
 * Hook for handling overlay scroll events
 * @param options - Scroll handling configuration
 */
function useOverlayScrollListener(options: OverlayScrollListenerOptions): void;

interface OverlayScrollListenerOptions {
  target: React.RefObject<HTMLElement>;
  overlay: React.RefObject<HTMLElement>;
  listener: () => void;
  when?: boolean;
}

/**
 * Hook for managing display order of overlays
 * @param overlayRef - Reference to overlay element
 * @param visible - Visibility state
 */
function useDisplayOrder(overlayRef: React.RefObject<HTMLElement>, visible: boolean): void;

/**
 * Effect hook that only runs on component unmount
 * @param fn - Cleanup function
 */
function useUnmountEffect(fn: () => void): void;

Utility Classes

Core utility classes for DOM manipulation, object operations, and component helpers.

/**
 * Object manipulation utilities
 */
class ObjectUtils {
  /** Check if value is empty (null, undefined, empty string/array/object) */
  static isEmpty(value: any): boolean;
  
  /** Check if value is not empty */
  static isNotEmpty(value: any): boolean;
  
  /** Deep merge objects */
  static merge(target: object, ...sources: object[]): object;
  
  /** Get nested property value by path */
  static resolveFieldData(data: any, field: string): any;
  
  /** Check if objects are equal */
  static equals(obj1: any, obj2: any, field?: string): boolean;
  
  /** Deep clone object */
  static deepEquals(a: any, b: any): boolean;
  
  /** Remove accents from string */
  static removeAccents(str: string): string;
  
  /** Check if value is array */
  static isArray(value: any): boolean;
  
  /** Check if value is date */
  static isDate(value: any): boolean;
  
  /** Check if value is function */
  static isFunction(value: any): boolean;
  
  /** Check if value is object */
  static isObject(value: any): boolean;
}

/**
 * DOM manipulation utilities
 */
class DomHandler {
  /** Add CSS class to element */
  static addClass(element: Element, className: string): void;
  
  /** Remove CSS class from element */
  static removeClass(element: Element, className: string): void;
  
  /** Check if element has CSS class */
  static hasClass(element: Element, className: string): boolean;
  
  /** Find single element by selector */
  static find(element: Element, selector: string): Element;
  
  /** Find multiple elements by selector */
  static findSingle(element: Element, selector: string): Element;
  
  /** Get element index within parent */
  static index(element: Element): number;
  
  /** Get element offset position */
  static getOffset(element: Element): { top: number; left: number };
  
  /** Get element width */
  static getWidth(element: Element): number;
  
  /** Get element height */
  static getHeight(element: Element): number;
  
  /** Get scrollbar width */
  static calculateScrollbarWidth(): number;
  
  /** Invoke function on next animation frame */
  static invokeElementMethod(element: Element, methodName: string, args?: any[]): any;
  
  /** Check if element is visible */
  static isVisible(element: Element): boolean;
  
  /** Get viewport */
  static getViewport(): { width: number; height: number };
  
  /** Get element outline width */
  static getOuterWidth(element: Element, margin?: boolean): number;
  
  /** Get element outline height */
  static getOuterHeight(element: Element, margin?: boolean): number;
  
  /** Fade in element */
  static fadeIn(element: Element, duration: number): void;
  
  /** Fade out element */
  static fadeOut(element: Element, duration: number): void;
  
  /** Get user agent */
  static getUserAgent(): string;
  
  /** Check if browser */
  static isIOS(): boolean;
  static isAndroid(): boolean;
  static isTouchDevice(): boolean;
}

/**
 * Z-index management utilities
 */
class ZIndexUtils {
  /** Get current z-index */
  static getCurrent(): number;
  
  /** Get new z-index */
  static getNext(): number;
  
  /** Set z-index for element */
  static set(key: string, element: HTMLElement, baseZIndex?: number): void;
  
  /** Clear z-index for element */
  static clear(element: HTMLElement): void;
}

/**
 * Generate unique component ID
 * @param prefix - Optional prefix for the ID
 * @returns Unique identifier string
 */
function UniqueComponentId(prefix?: string): string;

Event Bus

Global event communication system for component interaction.

/**
 * Global event bus for component communication
 */
class EventBus {
  /** Subscribe to event */
  static on(event: string, callback: Function): void;
  
  /** Unsubscribe from event */
  static off(event: string, callback: Function): void;
  
  /** Emit event */
  static emit(event: string, ...args: any[]): void;
}

Portal

React portal component for rendering content outside the component tree.

/**
 * React portal component for rendering outside component tree
 * @param props - Portal configuration options
 * @returns JSX element
 */
function Portal(props: PortalProps): JSX.Element;

interface PortalProps {
  /** Content to portal */
  children?: React.ReactNode;
  /** Target element or selector */
  element?: HTMLElement | string;
  /** Append to document body */
  appendTo?: HTMLElement | string;
  /** Visible state */
  visible?: boolean;
  /** Show event handler */
  onMounted?: (el: HTMLElement) => void;
  /** Hide event handler */
  onUnmounted?: (el: HTMLElement) => void;
}

CSS Transition

CSS transition wrapper component for smooth animations.

/**
 * CSS transition wrapper component
 * @param props - CSSTransition configuration options
 * @returns JSX element
 */
function CSSTransition(props: CSSTransitionProps): JSX.Element;

interface CSSTransitionProps {
  /** Child element to animate */
  children?: React.ReactNode;
  /** Transition enabled */
  in?: boolean;
  /** CSS class prefix for transition states */
  classNames?: string;
  /** Transition timeout */
  timeout?: number;
  /** Unmount on exit */
  unmountOnExit?: boolean;
  /** Enter transition handler */
  onEnter?: (node: HTMLElement) => void;
  /** Enter transition complete handler */
  onEntered?: (node: HTMLElement) => void;
  /** Exit transition handler */
  onExit?: (node: HTMLElement) => void;
  /** Exit transition complete handler */
  onExited?: (node: HTMLElement) => void;
}

Ripple Effect

Material design ripple effect component for interactive feedback.

/**
 * Material design ripple effect component
 * @param props - Ripple configuration options
 * @returns JSX element
 */
function Ripple(props: RippleProps): JSX.Element;

interface RippleProps {
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

Tooltip

Tooltip component for providing contextual information on hover or focus.

/**
 * Tooltip component for contextual information
 * @param props - Tooltip configuration options
 * @returns JSX element
 */
function Tooltip(props: TooltipProps): JSX.Element;

interface TooltipProps {
  /** Target element selector or reference */
  target?: string | React.RefObject<HTMLElement>;
  /** Tooltip content */
  content?: string;
  /** Position relative to target */
  position?: 'right' | 'left' | 'top' | 'bottom';
  /** Event that triggers tooltip */
  event?: 'hover' | 'focus';
  /** Hide event */
  hideEvent?: 'hover' | 'blur';
  /** Show delay in milliseconds */
  showDelay?: number;
  /** Hide delay in milliseconds */
  hideDelay?: number;
  /** Auto hide enabled */
  autoHide?: boolean;
  /** Show on disabled elements */
  showOnDisabled?: boolean;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

/**
 * Global tooltip options interface
 */
interface TooltipOptions {
  tooltip?: string;
  tooltipOptions?: {
    className?: string;
    position?: 'right' | 'left' | 'top' | 'bottom';
    event?: 'hover' | 'focus';
    showDelay?: number;
    hideDelay?: number;
  };
}

Overlay Services

Services for managing overlay components like dialogs, popups, and tooltips.

/**
 * Overlay management service
 */
class OverlayService {
  /** Show overlay */
  static show(overlay: HTMLElement, target: HTMLElement, options?: OverlayOptions): void;
  
  /** Hide overlay */
  static hide(overlay: HTMLElement): void;
  
  /** Check if overlay is visible */
  static isVisible(overlay: HTMLElement): boolean;
}

interface OverlayOptions {
  position?: 'center' | 'top' | 'bottom' | 'left' | 'right';
  modal?: boolean;
  dismissable?: boolean;
  showTransition?: string;
  hideTransition?: string;
}

/**
 * Terminal service for Terminal component
 */
class TerminalService {
  /** Send command to terminal */
  static sendCommand(command: string): void;
  
  /** Subscribe to command events */
  static on(event: 'command' | 'response', callback: Function): void;
  
  /** Unsubscribe from events */
  static off(event: 'command' | 'response', callback: Function): void;
}

Install with Tessl CLI

npx tessl i tessl/npm-primereact

docs

data-display.md

form-components.md

icons-theming.md

index.md

layout-navigation.md

utilities-services.md

tile.json