primereact

What is primereact?

PrimeReact is a comprehensive collection of rich UI components for React. It provides a wide range of components that are designed to be highly customizable and easy to use, making it suitable for building modern, responsive web applications.

What are primereact's main functionalities?

DataTable

The DataTable component is used to display data in a tabular format. It supports features like sorting, filtering, and pagination.

import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

const MyDataTable = () => {
  const data = [
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 25 }
  ];

  return (
    <DataTable value={data}>
      <Column field="id" header="ID" />
      <Column field="name" header="Name" />
      <Column field="age" header="Age" />
    </DataTable>
  );
};

export default MyDataTable;

Dialog

The Dialog component is used to display content in a modal window. It can be customized with headers, footers, and various other options.

import React, { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';

const MyDialog = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
      <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
        <p>Content</p>
      </Dialog>
    </div>
  );
};

export default MyDialog;

Chart

The Chart component is used to create various types of charts, such as bar, line, and pie charts. It is built on top of the popular Chart.js library.

import React from 'react';
import { Chart } from 'primereact/chart';

const MyChart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: '#42A5F5',
        borderColor: '#1E88E5',
        data: [65, 59, 80, 81, 56]
      }
    ]
  };

  return <Chart type="bar" data={data} />;
};

export default MyChart;

Other packages similar to primereact

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options. Compared to PrimeReact, Material-UI has a more modern design aesthetic and is widely adopted in the React community.

ant-design

Ant Design is a comprehensive UI framework for React that provides a large set of high-quality components. It is known for its robust design system and extensive documentation. Ant Design is similar to PrimeReact in terms of the breadth of components offered but has a different design philosophy.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that are easy to use and customize. While it offers fewer components compared to PrimeReact, it focuses on simplicity and ease of use.

README

PrimeReact

UI Components for React

Setup

In order to install dependencies you should install yarn. You can follow the yarn setup instructions here.

After the yarn installation just type yarn in the root project to install all dependencies

Start

gulp build
npm start

Changelog

1.0.0-beta.1 (2017-08-09)

Full Changelog

Implemented New Features and Enhancements:

• DataTable Crud #63
• MegaMenu component #62
• Steps component #61
• PanelMenu component #59
• ContextMenu component #58
• Menubar component #57
• TieredMenu component #56
• Breadcrumb component #54
• Add tabmenu component #53
• Add menu component #51
• Add lightbox component #46
• Add toolbar component #44
• Add password component #43
• Add keyboard support to dropdown #39
• Implemented DataScroller component #37
• Implemented Rating component #36
• Implemented ColorPicker component #35