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

Layout & Navigation

Name: tessl/npm-primereact
Author: tessl

Panel components, menus, and navigation elements for organizing application structure and user workflows.

Capabilities

Dialog

Modal dialog component for displaying content over the main application interface.

/**
 * Modal dialog component
 * @param props - Dialog configuration options
 * @returns JSX element
 */
function Dialog(props: DialogProps): JSX.Element;

interface DialogProps {
  /** Dialog visibility state */
  visible?: boolean;
  /** Header content */
  header?: React.ReactNode;
  /** Footer content */
  footer?: React.ReactNode;
  /** Hide handler */
  onHide?: () => void;
  /** Modal backdrop enabled */
  modal?: boolean;
  /** Closable via close button */
  closable?: boolean;
  /** Dismissable via backdrop click */
  dismissableMask?: boolean;
  /** Close on escape key */
  closeOnEscape?: boolean;
  /** Show header */
  showHeader?: boolean;
  /** Dialog width */
  style?: React.CSSProperties;
  /** Content CSS class */
  contentClassName?: string;
  /** Content style */
  contentStyle?: React.CSSProperties;
  /** Maximize/minimize enabled */
  maximizable?: boolean;
  /** Resizable dialog */
  resizable?: boolean;
  /** Draggable dialog */
  draggable?: boolean;
  /** Position on screen */
  position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

Usage Examples:

import { Dialog } from "primereact/dialog";
import { Button } from "primereact/button";

// Basic dialog
<Dialog 
  visible={visible} 
  onHide={() => setVisible(false)}
  header="Confirmation"
  style={{ width: '450px' }}
>
  <p>Are you sure you want to proceed?</p>
</Dialog>

// Dialog with custom footer
<Dialog 
  visible={visible} 
  onHide={() => setVisible(false)}
  header="User Details"
  footer={
    <div>
      <Button label="Save" />
      <Button label="Cancel" className="p-button-secondary" />
    </div>
  }
>
  {/* Dialog content */}
</Dialog>

TabView

Tabbed interface component for organizing content into multiple panels.

/**
 * Tabbed interface component
 * @param props - TabView configuration options
 * @returns JSX element
 */
function TabView(props: TabViewProps): JSX.Element;

interface TabViewProps {
  /** Active tab index */
  activeIndex?: number;
  /** Tab change handler */
  onTabChange?: (e: TabViewTabChangeEvent) => void;
  /** Tab close handler */
  onTabClose?: (e: TabViewTabCloseEvent) => void;
  /** Render active tab only */
  renderActiveOnly?: boolean;
  /** Scrollable tabs */
  scrollable?: boolean;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
  /** Child TabPanel components */
  children?: React.ReactNode;
}

interface TabViewTabChangeEvent {
  originalEvent: React.SyntheticEvent;
  index: number;
}

interface TabViewTabCloseEvent {
  originalEvent: React.SyntheticEvent;
  index: number;
}

/**
 * Individual tab panel component
 * @param props - TabPanel configuration options
 * @returns JSX element
 */
function TabPanel(props: TabPanelProps): JSX.Element;

interface TabPanelProps {
  /** Tab header text */
  header?: React.ReactNode;
  /** Left icon */
  leftIcon?: string;
  /** Right icon */
  rightIcon?: string;
  /** Closable tab */
  closable?: boolean;
  /** Disabled tab */
  disabled?: boolean;
  /** Header template */
  headerTemplate?: (options: TabPanelHeaderTemplateOptions) => React.ReactNode;
  /** Content template */
  contentTemplate?: (options: TabPanelContentTemplateOptions) => React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Header CSS class */
  headerClassName?: string;
  /** Content CSS class */
  contentClassName?: string;
  /** Child content */
  children?: React.ReactNode;
}

interface TabPanelHeaderTemplateOptions {
  className: string;
  titleClassName: string;
  onClick: (e: React.MouseEvent) => void;
  leftIconElement: React.ReactNode;
  titleElement: React.ReactNode;
  rightIconElement: React.ReactNode;
  element: React.ReactNode;
  props: TabPanelProps;
  index: number;
  selected: boolean;
  ariaControls: string;
}

/**
 * Basic menu component
 * @param props - Menu configuration options
 * @returns JSX element
 */
function Menu(props: MenuProps): JSX.Element;

interface MenuProps {
  /** Menu items array */
  model?: MenuItem[];
  /** Popup mode */
  popup?: boolean;
  /** Popup reference element */
  popupAlignment?: 'left' | 'right';
  /** Show method for popup */
  show?: (event: React.SyntheticEvent) => void;
  /** Hide method for popup */
  hide?: () => void;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface MenuItem {
  /** Item label */
  label?: string;
  /** Item icon */
  icon?: string;
  /** Navigation URL */
  url?: string;
  /** Click handler */
  command?: (e: MenuItemCommandEvent) => void;
  /** Submenu items */
  items?: MenuItem[];
  /** Disabled state */
  disabled?: boolean;
  /** Visible state */
  visible?: boolean;
  /** Separator item */
  separator?: boolean;
  /** Custom template */
  template?: (item: MenuItem, options: any) => React.ReactNode;
  /** CSS class name */
  className?: string;
  /** CSS style */
  style?: React.CSSProperties;
}

interface MenuItemCommandEvent {
  originalEvent: React.SyntheticEvent;
  item: MenuItem;
}

Sidebar

Slide-out panel component for secondary navigation or content areas.

/**
 * Slide-out panel component
 * @param props - Sidebar configuration options
 * @returns JSX element
 */
function Sidebar(props: SidebarProps): JSX.Element;

interface SidebarProps {
  /** Sidebar visibility */
  visible?: boolean;
  /** Hide handler */
  onHide?: () => void;
  /** Sidebar position */
  position?: 'left' | 'right' | 'top' | 'bottom';
  /** Full height sidebar */
  fullScreen?: boolean;
  /** Block scroll when visible */
  blockScroll?: boolean;
  /** Base z-index value */
  baseZIndex?: number;
  /** Dismiss on mask click */
  dismissable?: boolean;
  /** Show close icon */
  showCloseIcon?: boolean;
  /** Close icon */
  closeIcon?: string;
  /** Sidebar icons */
  icons?: React.ReactNode;
  /** Modal mode */
  modal?: boolean;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
  /** Child content */
  children?: React.ReactNode;
}

Accordion

Collapsible content panels for organizing related information in expandable sections.

/**
 * Collapsible content panels
 * @param props - Accordion configuration options
 * @returns JSX element
 */
function Accordion(props: AccordionProps): JSX.Element;

interface AccordionProps {
  /** Active tab indices */
  activeIndex?: number | number[];
  /** Tab change handler */
  onTabChange?: (e: AccordionTabChangeEvent) => void;
  /** Multiple tabs open simultaneously */
  multiple?: boolean;
  /** Expand icon */
  expandIcon?: string;
  /** Collapse icon */
  collapseIcon?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
  /** Child AccordionTab components */
  children?: React.ReactNode;
}

interface AccordionTabChangeEvent {
  originalEvent: React.SyntheticEvent;
  index: number | number[];
}

/**
 * Individual accordion tab component
 * @param props - AccordionTab configuration options
 * @returns JSX element
 */
function AccordionTab(props: AccordionTabProps): JSX.Element;

interface AccordionTabProps {
  /** Tab header content */
  header?: React.ReactNode;
  /** Header template function */
  headerTemplate?: (options: AccordionTabHeaderTemplateOptions) => React.ReactNode;
  /** Disabled state */
  disabled?: boolean;
  /** CSS class name */
  className?: string;
  /** Header CSS class */
  headerClassName?: string;
  /** Content CSS class */
  contentClassName?: string;
  /** Child content */
  children?: React.ReactNode;
}

Menubar

Horizontal navigation menu bar with nested submenus support.

/**
 * Horizontal menu bar component
 * @param props - Menubar configuration options
 * @returns JSX element
 */
function Menubar(props: MenubarProps): JSX.Element;

interface MenubarProps {
  /** Menu items array */
  model?: MenuItem[];
  /** Start content template */
  start?: React.ReactNode;
  /** End content template */
  end?: React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

Splitter

Resizable panel splitter for creating adjustable layout sections.

/**
 * Resizable panel splitter
 * @param props - Splitter configuration options
 * @returns JSX element
 */
function Splitter(props: SplitterProps): JSX.Element;

interface SplitterProps {
  /** Split direction */
  layout?: 'horizontal' | 'vertical';
  /** Gutter size in pixels */
  gutterSize?: number;
  /** Minimum sizes for panels */
  minSizes?: number[];
  /** Panel sizes (controlled mode) */
  sizes?: number[];
  /** Resize end handler */
  onResizeEnd?: (e: SplitterResizeEndEvent) => void;
  /** Resize handler */
  onResize?: (e: SplitterResizeEvent) => void;
  /** Resizerestyle */
  resizerStyle?: React.CSSProperties;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
  /** Child SplitterPanel components */
  children?: React.ReactNode;
}

interface SplitterResizeEndEvent {
  originalEvent: Event;
  sizes: number[];
}

interface SplitterResizeEvent {
  originalEvent: Event;
  sizes: number[];
}

/**
 * Individual splitter panel component
 * @param props - SplitterPanel configuration options
 * @returns JSX element
 */
function SplitterPanel(props: SplitterPanelProps): JSX.Element;

interface SplitterPanelProps {
  /** Panel size */
  size?: number;
  /** Minimum size */
  minSize?: number;
  /** CSS class name */
  className?: string;
  /** Child content */
  children?: React.ReactNode;
}

Toolbar

Action toolbar component for grouping related commands and controls.

/**
 * Action toolbar component
 * @param props - Toolbar configuration options
 * @returns JSX element
 */
function Toolbar(props: ToolbarProps): JSX.Element;

interface ToolbarProps {
  /** Left side content */
  left?: React.ReactNode;
  /** Right side content */
  right?: React.ReactNode;
  /** Start content (alias for left) */
  start?: React.ReactNode;
  /** End content (alias for right) */
  end?: React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

Steps

Step indicator component for showing progress through a multi-step process.

/**
 * Step indicator component
 * @param props - Steps configuration options
 * @returns JSX element
 */
function Steps(props: StepsProps): JSX.Element;

interface StepsProps {
  /** Step items array */
  model?: MenuItem[];
  /** Active step index */
  activeIndex?: number;
  /** Step selection handler */
  onSelect?: (e: StepsSelectEvent) => void;
  /** Read-only mode */
  readOnly?: boolean;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface StepsSelectEvent {
  originalEvent: React.SyntheticEvent;
  item: MenuItem;
  index: number;
}

BreadCrumb

Navigation breadcrumb component for showing hierarchical location.

/**
 * Navigation breadcrumb component
 * @param props - BreadCrumb configuration options
 * @returns JSX element
 */
function BreadCrumb(props: BreadCrumbProps): JSX.Element;

interface BreadCrumbProps {
  /** Breadcrumb items */
  model?: MenuItem[];
  /** Home item */
  home?: MenuItem | null;
  /** Separator icon */
  separatorIcon?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

Install with Tessl CLI