0

PrimeReact

最完整的 React UI 组件库。（The Most Complete React UI Component Library）

Official Site
Github repo
Main metrics

Github stars Tracking Chart

PrimeReact

PrimeReact 是一套丰富的 React 开源 UI 组件。查看 PrimeReact 主页，了解实时展示和文档。

下载

PrimeReact 可以在 npm 上获得，如果你有一个现有的应用程序，运行以下命令将其下载到你的项目中。 

npm install primereact --save
npm install primeicons --save

Import 

//import {ComponentName} from 'primereact/{componentname}';
import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';

依赖关系

大多数 PrimeReact 组件（95%）都是原生的，但也有一些例外，如 Google Maps 的 GMap，需要依赖第三方。

此外，组件的图标需要 PrimeIcons，动画需要 react-transition-group。

dependencies: {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-transition-group": "^4.4.1",
    "primeicons": "^4.0.0"
}

风格

css 依赖关系如下，注意你可以用你选择的其他主题来改变： 

primereact/resources/themes/saga-blue/theme.css
primereact/resources/primereact.min.css
primeicons/primeicons.css

如果你使用的是一个捆绑程序，比如 webpack，它有一个 css 加载器，你也可以把它们导入到你的主应用程序组件中，比如 create-react-app 中的一个例子就是： 

import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

快速启动

基于 creation-react-app 的 应用实例 可以在 github 上找到。

TypeScript

Typescript 是完全支持的，因为在 PrimeReact 的 npm 包中提供了类型定义文件。在 github 上也提供了一个 typescript-primereact 应用程序 的示例。


Overview

Name With Ownerprimefaces/primereact
Primary LanguageCSS
Program languageJavaScript (Language Count: 3)
PlatformLinux, Mac, Windows
License:MIT License
Release Count157
Last Release Name10.6.3 (Posted on )
First Release Name1.0.0-alpha.1 (Posted on )
Created At2016-12-16 15:56:27
Pushed At2024-04-20 15:15:28
Last Commit At2024-04-19 15:51:06
Stargazers Count5.7k
Watchers Count77
Fork Count0.9k
Commits Count10.3k
Has Issues Enabled
Issues Count4451
Issue Open Count235
Pull Requests Count1650
Pull Requests Open Count18
Pull Requests Close Count305
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

License: MIT
npm version
Join the chat at https://gitter.im/primefaces/primereact

PrimeReact

PrimeReact is a rich set of open source UI Components for React.

PrimeReact Logo

See PrimeReact homepage for live showcase and documentation.

Components demo

Download

PrimeReact is available at npm, if you have an existing application run the following command to download it to your project.

npm install primereact --save
npm install primeicons --save

Import

//import {ComponentName} from 'primereact/{componentname}';
import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';

Dependencies

Majority of PrimeReact components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.

In addition, components require PrimeIcons for icons, classNames package to manage style classes and react-transition-group for animations.

dependencies: {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-transition-group": "^2.2.1",
    "classnames": "^2.2.5",
    "primeicons": "^2.0.0"
}

Styles

The css dependencies are as follows, note that you may change the theme with another one of your choice.

primereact/resources/themes/nova-light/theme.css
primereact/resources/primereact.min.css
primeicons/primeicons.css

If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

QuickStart

An example application based on create-react-app is available at github.

TypeScript

Typescript
Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample typescript-primereact application is available as well at github.

To the top