primefaces / primereact

The Most Complete React UI Component Library

PrimeReact

PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation.

Download

PrimeReact is available at npm.

# Using npm
npm install primereact

# Using yarn
yarn add primereact

# Using pnpm
pnpm add primereact

Import

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.

//import { ComponentName } from 'primereact/{componentname}';
import { Button } from 'primereact/button';

export default function MyComponent() {
  return (
    <Button label="PrimeReact" />
  )
}

Theming

PrimeReact has two theming modes; styled or unstyled.

Styled Mode

Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the Themes section for the complete list of available themes to choose from.

// theme
import 'primereact/resources/themes/lara-light-cyan/theme.css';

Unstyled Mode

Unstyled mode is disabled by default for all components. Using the PrimeReact context, set unstyled as true to enable it globally. Visit the Unstyled mode documentation for more information and examples.

Contributors

primereact's Issues

Chips need input focus

If we focus on the chips input box then it should get the focus like any other input component.This can be replicated on showcase as well.

Menubar component

Radio button label toggle state is missing

As per the documentation the label is also clickable and toggles the radio button state.But as of now the label doesn't toggle the radio button state.

Autocomplete dropdown misalignment with input

The autocomplete dropdown is not exactly aligned with input.This can be replicated on showcase with advanced feature.

Dropdown onChange invoked on same item selection

The Dropdown's onChange event need to be invoked when there is a change in the value.If we select the same value twice then also this callback event is invoked.

Unit tests for components

Hi all,

Thank you for the good job. Just wondered if you have any plan to integrate unit tests for each component and so on?

Thanks

Baris

Schedule event is not responding

If we click on the schedule event then dialog should appear with event details.This can be replicated on showcase as well.

New Component Tooltip

Header, footer and paginator standardization

Module not found: Error: Can't resolve 'primereact/resources/primeng.min.css'

did that get left out?

Implemented Captcha Component

TreeTable Component

line.gif is missing

I've created a package for 1.0.0-alpha2 using "npm pack" command, and the primeng.min.css is missing line.gif. The original file is Tree.css.

Implemented DataScroller component

Checkbox label toggle state is not working

As per the documentation the label is also clickable and toggles the checked state.But as of now the label doesn't toggle the checkbox state.

Accordion activeIndex doesn't work

Just the same problem as with TabView.

Accordion Tab Caret icons are not toggleable

The accordion tabs need to be toggled by clicking anywhere in the tab bar.As of now tabs content is not toggle-able on click of icons.This can be replicated on showcase.

Implemented Rating component

[Showcase]Setup documentation need to be corrected

The setup documentation has typos by pointing to PrimeNG instead of PrimeReact in many places.(Espeically import section)

PR: #8

submit type Button component not supported

The Button component unconditionally overwrites the type attibute to 'button' even if I want it to be 'submit'.

In contrast I can create an InputText with type attribute set to 'password'.

Add tabmenu component

Dropdown is missing input focus

If you select or click dropdown inputbox then it should get focused like any other input component.This can be replicated in showcase too.

Styles broken in the showcase

I installed and run the code, however, the styling is broken for most of the components.

Add keyboard support to dropdown

Autocomplete Multiple feature missing input focus

If we use autocomplete by enabling multiple feature(i.e, multiple=true) then input should get the focus like other cases.This can be replicated on showcase as well.

DataTable Crud

Plans for adding tests?

I saw PR #5 out there.

Are there any plans on adding tests?

About defaultProps and propTypes

Hello,
According to me defaultProps and propTypes as static members are nicer than assigning outside of the class. Do you have a specific reason to go like that?

Spinner controls are not user friendly

Currently the spinner controls are very small and difficult to do user actions.The width of the controls area need to enlarged.

Tree Component

Defines the orientation of the tree, valid values are 'vertical' and 'horizontal'.

Add github shortcut

Add editable to dropdown

Steps component

MegaMenu component

Add filter attributes to dropdown

ContextMenu component

Add menu component

Add lightbox component

Add toolbar component

Implemented ColorPicker component

PanelMenu component

[Showcase]Typo in Inputmask

There is small typo on SlotChar heading.It should be 'SlotChar' instead 'SlothChar' :)

Breadcrumb component

TieredMenu component

Mobile Touch support to Slider Component

Add password component

Wiki or README update for SASS conversion

Theme files need to be converted from SASS to CSS files.To work with build from source, there is a need of documentation for SASS install or node-sass steps to notify users .

activeIndex property on TabView doesn't work

Unable to create a TabView where the activeIndex is not the first, because the component uses the value from its state and ignores the value it receives in props.

We should use the componentWillReceiveProps lifecycle method to copy the value from component props to state.

MultiSelect Input focus is missing

If you select or click multiselect inputbox then it should get focused like any other input component.This can be replicated in showcase too.

Button focus is missing for click operation

The button components requires focus once there is a click action/operation.This issue is replicated for buttons with severity classes.This can be replicated on showcase.