0
# PrimeReact
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: primereact
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install primereact`
10
11
## Core Imports
12
13
```typescript
14
// Form Components
15
import { Button } from "primereact/button";
16
import { InputText } from "primereact/inputtext";
17
import { Calendar } from "primereact/calendar";
18
import { Dropdown } from "primereact/dropdown";
19
import { ColorPicker } from "primereact/colorpicker";
20
import { FileUpload } from "primereact/fileupload";
21
import { InputMask } from "primereact/inputmask";
22
import { InputTextarea } from "primereact/inputtextarea";
23
24
// Data Display
25
import { DataTable } from "primereact/datatable";
26
import { Column } from "primereact/column";
27
import { Tree } from "primereact/tree";
28
import { Card } from "primereact/card";
29
import { Carousel } from "primereact/carousel";
30
import { Chart } from "primereact/chart";
31
import { Image } from "primereact/image";
32
import { Timeline } from "primereact/timeline";
33
34
// Layout & Navigation
35
import { Dialog } from "primereact/dialog";
36
import { TabView, TabPanel } from "primereact/tabview";
37
import { Menu } from "primereact/menu";
38
import { Sidebar } from "primereact/sidebar";
39
import { Accordion, AccordionTab } from "primereact/accordion";
40
```
41
42
For CommonJS:
43
44
```javascript
45
const { Button } = require("primereact/button");
46
const { DataTable } = require("primereact/datatable");
47
const { ColorPicker } = require("primereact/colorpicker");
48
const { Card } = require("primereact/card");
49
```
50
51
## Basic Usage
52
53
```typescript
54
import React, { useState } from 'react';
55
import { Button } from "primereact/button";
56
import { InputText } from "primereact/inputtext";
57
import { DataTable } from "primereact/datatable";
58
import { Column } from "primereact/column";
59
60
// Basic form with validation
61
function ContactForm() {
62
const [name, setName] = useState('');
63
64
return (
65
<div>
66
<InputText
67
value={name}
68
onChange={(e) => setName(e.target.value)}
69
placeholder="Enter your name"
70
/>
71
<Button
72
label="Submit"
73
onClick={() => console.log(name)}
74
disabled={!name}
75
/>
76
</div>
77
);
78
}
79
80
// Data display
81
function UserTable({ users }) {
82
return (
83
<DataTable value={users} paginator rows={10}>
84
<Column field="name" header="Name" />
85
<Column field="email" header="Email" />
86
<Column field="role" header="Role" />
87
</DataTable>
88
);
89
}
90
```
91
92
## Architecture
93
94
PrimeReact is built around several key architectural patterns:
95
96
- **Component Architecture**: Individual components with consistent prop interfaces and event patterns
97
- **Theming System**: Global theme configuration with CSS variables and styled/unstyled modes
98
- **Passthrough System**: DOM customization via `pt` prop for deep styling control
99
- **Event System**: Consistent event object patterns across all interactive components
100
- **Type Safety**: Full TypeScript integration with generic support where appropriate
101
- **Accessibility**: Built-in ARIA attributes and keyboard navigation
102
- **Internationalization**: Global locale configuration and component-level text customization
103
104
## Capabilities
105
106
### Form Components
107
108
Complete form input components with validation, formatting, and accessibility support. Includes text inputs, selectors, date pickers, and specialized input types.
109
110
```typescript { .api }
111
// Core form inputs
112
function InputText(props: InputTextProps): JSX.Element;
113
function Button(props: ButtonProps): JSX.Element;
114
function Calendar(props: CalendarProps): JSX.Element;
115
function Dropdown(props: DropdownProps): JSX.Element;
116
117
interface InputTextProps {
118
id?: string;
119
value?: string;
120
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
121
placeholder?: string;
122
disabled?: boolean;
123
className?: string;
124
style?: React.CSSProperties;
125
pt?: PassThroughOptions;
126
}
127
```
128
129
[Form Components](./form-components.md)
130
131
### Data Display Components
132
133
Advanced data presentation components including tables, trees, and virtual scrolling with sorting, filtering, and pagination capabilities.
134
135
```typescript { .api }
136
function DataTable<T>(props: DataTableProps<T>): JSX.Element;
137
function Column(props: ColumnProps): JSX.Element;
138
function Tree(props: TreeProps): JSX.Element;
139
140
interface DataTableProps<T> {
141
value?: T[];
142
columns?: ColumnProps[];
143
paginator?: boolean;
144
rows?: number;
145
sortField?: string;
146
sortOrder?: 1 | -1;
147
onSelectionChange?: (e: DataTableSelectionChangeEvent<T>) => void;
148
pt?: PassThroughOptions;
149
}
150
```
151
152
[Data Display Components](./data-display.md)
153
154
### Layout & Navigation
155
156
Panel components, menus, and navigation elements for organizing application structure and user workflows.
157
158
```typescript { .api }
159
function Dialog(props: DialogProps): JSX.Element;
160
function TabView(props: TabViewProps): JSX.Element;
161
function Menu(props: MenuProps): JSX.Element;
162
function Sidebar(props: SidebarProps): JSX.Element;
163
164
interface DialogProps {
165
visible?: boolean;
166
header?: React.ReactNode;
167
footer?: React.ReactNode;
168
onHide?: () => void;
169
modal?: boolean;
170
closable?: boolean;
171
pt?: PassThroughOptions;
172
}
173
```
174
175
[Layout & Navigation](./layout-navigation.md)
176
177
### Utility Components & Services
178
179
Core utilities, services, and helper components that provide foundational functionality across the library.
180
181
```typescript { .api }
182
// Global API configuration
183
interface PrimeReactAPIOptions {
184
ripple?: boolean;
185
inputStyle?: 'outlined' | 'filled';
186
locale?: string;
187
appendTo?: HTMLElement | string;
188
autoZIndex?: boolean;
189
hideOverlaysOnDocumentScrolling?: boolean;
190
}
191
192
function locale(locale: string): void;
193
function addLocale(locale: string, options: LocaleOptions): void;
194
195
// Utility hooks
196
function useEventListener(options: EventListenerOptions): void;
197
function useUpdateEffect(fn: () => void, deps: React.DependencyList): void;
198
```
199
200
[Utilities & Services](./utilities-services.md)
201
202
### Icons & Theming
203
204
Built-in SVG icon components and comprehensive theming system with CSS variables and passthrough customization.
205
206
```typescript { .api }
207
// Icon components
208
function AngleDownIcon(props: IconProps): JSX.Element;
209
function CalendarIcon(props: IconProps): JSX.Element;
210
function SearchIcon(props: IconProps): JSX.Element;
211
212
interface IconProps {
213
className?: string;
214
style?: React.CSSProperties;
215
onClick?: (e: React.MouseEvent) => void;
216
}
217
218
// Theming
219
interface PassThroughOptions {
220
root?: object;
221
input?: object;
222
panel?: object;
223
[key: string]: any;
224
}
225
```
226
227
[Icons & Theming](./icons-theming.md)
228
229
## Global Types
230
231
```typescript { .api }
232
// Common event interfaces
233
interface ChangeEvent<T = any> {
234
originalEvent: React.SyntheticEvent;
235
value: T;
236
target: {
237
name: string;
238
id: string;
239
value: T;
240
};
241
}
242
243
interface SelectEvent<T = any> {
244
originalEvent: React.SyntheticEvent;
245
value: T;
246
}
247
248
// Passthrough system
249
interface PassThroughMethodOptions {
250
props: any;
251
state: any;
252
context: any;
253
}
254
255
type PassThroughType<T> = T | ((options: PassThroughMethodOptions) => T);
256
257
// Template functions
258
type TemplateFunction<T = any> = (item: T, options: any) => React.ReactNode;
259
```