PrimeReact online editor

Write, Run & Share PrimeReact code online using OneCompiler's PrimeReact online editor for free. It's one of the robust, feature-rich online editors for PrimeReact. Getting started with the OneCompiler's PrimeReact online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'PrimeReact' and start writing code to learn and test online without worrying about tedious process of installation.

About PrimeReact

PrimeReact is a large suite of UI components for React, covering forms, tables, overlays, menus, and charts. The look comes from a theme stylesheet you pick and import, alongside the core stylesheet and the PrimeIcons font for icons. Each component is imported from its own path, so you only pull in what you use.

Syntax help

Setup

Import a theme, the core PrimeReact stylesheet, and PrimeIcons. Swap the theme file to change the whole palette.

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

import { Button } from 'primereact/button';

Buttons

Button takes a label, an optional icon, and a severity for color. Add outlined or text to change the style.

import { Button } from 'primereact/button';

<Button label="Save" icon="pi pi-check" />
<Button label="Cancel" severity="secondary" outlined />
<Button label="Delete" severity="danger" icon="pi pi-trash" />

Inputs

Text inputs come from primereact/inputtext. Control them with value and onChange like a normal React input.

import { InputText } from 'primereact/inputtext';
import { useState } from 'react';

function NameField() {
  const [name, setName] = useState('');
  return (
    <InputText
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Your name"
    />
  );
}

Panels and cards

Card groups content under a title. It accepts a title, a subTitle, and a footer.

import { Card } from 'primereact/card';
import { Button } from 'primereact/button';

<Card title="Plan" subTitle="Monthly">
  <p>What's included in the plan.</p>
  <Button label="Choose" />
</Card>

Dropdown

Dropdown is a select with search and templating. Give it an options array plus value and onChange.

import { Dropdown } from 'primereact/dropdown';
import { useState } from 'react';

const cities = [
  { name: 'London', code: 'LDN' },
  { name: 'Paris', code: 'PRS' },
];

function CityPicker() {
  const [city, setCity] = useState(null);
  return (
    <Dropdown
      value={city}
      onChange={(e) => setCity(e.value)}
      options={cities}
      optionLabel="name"
      placeholder="Select a city"
    />
  );
}

DataTable

DataTable renders rows from an array, with a Column for each field. Turn on paginator and sortable as needed.

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

const products = [
  { id: 1, name: 'Pen', price: 2 },
  { id: 2, name: 'Notebook', price: 5 },
];

<DataTable value={products} paginator rows={5}>
  <Column field="name" header="Name" sortable />
  <Column field="price" header="Price" sortable />
</DataTable>

Icons

PrimeIcons uses class names of the form pi pi-<name>, which you pass to a component's icon prop or drop into an <i> tag.

<i className="pi pi-check" />
<i className="pi pi-search" style={{ fontSize: '1.5rem' }} />