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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

PrimeReact

Name: tessl/npm-primereact
Author: tessl

PrimeReact is a comprehensive React UI component library featuring 118+ components designed for building modern, responsive web applications. It provides a complete suite of form inputs, data displays, navigation elements, and layout utilities with built-in theming, accessibility support, and TypeScript integration.

Package Information

Package Name: primereact
Package Type: npm
Language: TypeScript
Installation: npm install primereact

Core Imports

// Form Components
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { Calendar } from "primereact/calendar";
import { Dropdown } from "primereact/dropdown";
import { ColorPicker } from "primereact/colorpicker";
import { FileUpload } from "primereact/fileupload";
import { InputMask } from "primereact/inputmask";
import { InputTextarea } from "primereact/inputtextarea";

// Data Display
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { Tree } from "primereact/tree";
import { Card } from "primereact/card";
import { Carousel } from "primereact/carousel";
import { Chart } from "primereact/chart";
import { Image } from "primereact/image";
import { Timeline } from "primereact/timeline";

// Layout & Navigation
import { Dialog } from "primereact/dialog";
import { TabView, TabPanel } from "primereact/tabview";
import { Menu } from "primereact/menu";
import { Sidebar } from "primereact/sidebar";
import { Accordion, AccordionTab } from "primereact/accordion";

For CommonJS:

const { Button } = require("primereact/button");
const { DataTable } = require("primereact/datatable");
const { ColorPicker } = require("primereact/colorpicker");
const { Card } = require("primereact/card");

Basic Usage

import React, { useState } from 'react';
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";

// Basic form with validation
function ContactForm() {
  const [name, setName] = useState('');
  
  return (
    <div>
      <InputText 
        value={name} 
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <Button 
        label="Submit" 
        onClick={() => console.log(name)}
        disabled={!name}
      />
    </div>
  );
}

// Data display
function UserTable({ users }) {
  return (
    <DataTable value={users} paginator rows={10}>
      <Column field="name" header="Name" />
      <Column field="email" header="Email" />
      <Column field="role" header="Role" />
    </DataTable>
  );
}

Architecture

PrimeReact is built around several key architectural patterns:

Component Architecture: Individual components with consistent prop interfaces and event patterns
Theming System: Global theme configuration with CSS variables and styled/unstyled modes
Passthrough System: DOM customization via pt prop for deep styling control
Event System: Consistent event object patterns across all interactive components
Type Safety: Full TypeScript integration with generic support where appropriate
Accessibility: Built-in ARIA attributes and keyboard navigation
Internationalization: Global locale configuration and component-level text customization

Capabilities

Form Components

Complete form input components with validation, formatting, and accessibility support. Includes text inputs, selectors, date pickers, and specialized input types.

// Core form inputs
function InputText(props: InputTextProps): JSX.Element;
function Button(props: ButtonProps): JSX.Element;
function Calendar(props: CalendarProps): JSX.Element;
function Dropdown(props: DropdownProps): JSX.Element;

interface InputTextProps {
  id?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  pt?: PassThroughOptions;
}

Form Components

Data Display Components

Advanced data presentation components including tables, trees, and virtual scrolling with sorting, filtering, and pagination capabilities.

function DataTable<T>(props: DataTableProps<T>): JSX.Element;
function Column(props: ColumnProps): JSX.Element;
function Tree(props: TreeProps): JSX.Element;

interface DataTableProps<T> {
  value?: T[];
  columns?: ColumnProps[];
  paginator?: boolean;
  rows?: number;
  sortField?: string;
  sortOrder?: 1 | -1;
  onSelectionChange?: (e: DataTableSelectionChangeEvent<T>) => void;
  pt?: PassThroughOptions;
}

Data Display Components

Layout & Navigation

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

function Dialog(props: DialogProps): JSX.Element;
function TabView(props: TabViewProps): JSX.Element;
function Menu(props: MenuProps): JSX.Element;
function Sidebar(props: SidebarProps): JSX.Element;

interface DialogProps {
  visible?: boolean;
  header?: React.ReactNode;
  footer?: React.ReactNode;
  onHide?: () => void;
  modal?: boolean;
  closable?: boolean;
  pt?: PassThroughOptions;
}

Layout & Navigation

Utility Components & Services

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

// Global API configuration
interface PrimeReactAPIOptions {
  ripple?: boolean;
  inputStyle?: 'outlined' | 'filled';
  locale?: string;
  appendTo?: HTMLElement | string;
  autoZIndex?: boolean;
  hideOverlaysOnDocumentScrolling?: boolean;
}

function locale(locale: string): void;
function addLocale(locale: string, options: LocaleOptions): void;

// Utility hooks
function useEventListener(options: EventListenerOptions): void;
function useUpdateEffect(fn: () => void, deps: React.DependencyList): void;

Utilities & Services

Icons & Theming

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

// Icon components
function AngleDownIcon(props: IconProps): JSX.Element;
function CalendarIcon(props: IconProps): JSX.Element;
function SearchIcon(props: IconProps): JSX.Element;

interface IconProps {
  className?: string;
  style?: React.CSSProperties;
  onClick?: (e: React.MouseEvent) => void;
}

// Theming
interface PassThroughOptions {
  root?: object;
  input?: object;
  panel?: object;
  [key: string]: any;
}

Icons & Theming

Global Types

// Common event interfaces
interface ChangeEvent<T = any> {
  originalEvent: React.SyntheticEvent;
  value: T;
  target: {
    name: string;
    id: string;
    value: T;
  };
}

interface SelectEvent<T = any> {
  originalEvent: React.SyntheticEvent;
  value: T;
}

// Passthrough system
interface PassThroughMethodOptions {
  props: any;
  state: any;
  context: any;
}

type PassThroughType<T> = T | ((options: PassThroughMethodOptions) => T);

// Template functions
type TemplateFunction<T = any> = (item: T, options: any) => React.ReactNode;