PrimeReact

https://primereact.org/
Admin
PrimeReact is a comprehensive open-source UI component library offering 80+ customizable React...
Tokens:143,199
Snippets:1,966
Trust Score:8.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install and Run Atlantis

Source: https://primereact.org/templates/atlantis

Use npm or yarn to install dependencies and start the development server for the Atlantis template.

```bash
npm install or yarn
```

```bash
npm run dev or yarn dev
```

--------------------------------

### Basic Toolbar Setup

Source: https://primereact.org/toolbar

Use the start, center, and end properties to position content within the Toolbar. Ensure startContent and endContent are defined.

```jsx
<Toolbar start={startContent} end={endContent} />
```

--------------------------------

### Install Dependencies and Run Showcase

Source: https://primereact.org/contribution

Install project dependencies and run the showcase locally. Access it at http://localhost:3000/.

```bash
npm install
npm run dev
```

--------------------------------

### Install Chart.js

Source: https://primereact.org/chart

Chart component uses Chart.JS underneath so it needs to be installed as a dependency.

```bash
npm install chart.js
         
```

--------------------------------

### Basic useMountEffect Example

Source: https://primereact.org/hooks/usemounteffect

This example demonstrates displaying an info toast message when the component mounts. Ensure you have a toast instance available.

```javascript
useMountEffect(() => {
    toast.current.show({ severity: 'info', summary: 'Mounted', sticky: true });
});
```

--------------------------------

### Basic Inplace Example

Source: https://primereact.org/inplace

A fundamental example demonstrating the Inplace component with display and content sections.

```javascript
<Inplace>
    <InplaceDisplay>View Content</InplaceDisplay>
    <InplaceContent>
        <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </InplaceContent>
</Inplace>
```

--------------------------------

### Install PrimeReact with npm or yarn

Source: https://primereact.org/installation

Install the PrimeReact library using your preferred package manager.

```bash
npm install primereact
```

```bash
yarn add primereact
```

--------------------------------

### Install Freya Template

Source: https://primereact.org/templates/freya

Install the Freya template using npm or yarn. This command is typically run in the project's root directory.

```bash
npm install or yarn
```

--------------------------------

### Basic TreeTable Example

Source: https://primereact.org/treetable

A basic TreeTable setup requires a collection of TreeNode instances for the 'value' prop and Column components for defining the table structure. Enable the 'expander' property on the column that displays the element used to toggle nodes.

```jsx
<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
```

--------------------------------

### Basic Galleria Setup

Source: https://primereact.org/galleria

A basic Galleria setup requires a 'value' for images, an 'item' template for high-resolution display, and a 'thumbnail' template.

```jsx
<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }}
    item={itemTemplate} thumbnail={thumbnailTemplate} />
```

--------------------------------

### Install PrimeIcons

Source: https://primereact.org/icons

Download the PrimeIcons library using npm. This is the first step to using icons in your project.

```bash
npm install primeicons
```

--------------------------------

### Basic Menu Setup

Source: https://primereact.org/menu

Render a basic Menu component by providing a collection of menu items to the 'model' prop.

```jsx
<Menu model={items} />
```

--------------------------------

### PrimeReact Bootstrap Integration Example

Source: https://primereact.org/bootstrap

This example demonstrates integrating Bootstrap styles with PrimeReact components like Button and Dialog. It assumes Bootstrap is already set up in your project.

```javascript
import React, { useState } from
'react';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
import { ProgressBar } from
'primereact/progressbar';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { Menu } from 'primereact/menu';
import { Dialog } from 'primereact/dialog';

export default function App() {
    const [visible, setVisible] = useState(false);

    const items = [
        { label: 'New', icon: 'pi pi-fw pi-plus' },
        { label: 'Delete', icon: 'pi pi-fw pi-trash' },
    ];

    return (
        <>
            <div className="d-flex justify-content-center p-4">
                <h2 className="m-0">Bootstrap Demo</h2>
            </div>
            <div className="d-flex flex-column">
                <div className="d-flex flex-column flex-shrink-0 p-4 w-100">
                    <span className="d-block"></span>
                    <InputText placeholder="Input Text" />
                    <InputTextarea placeholder="Input Textarea" rows={3} cols={30} />
                    <Panel header="Panel Header">
                        <p className="m-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                    </Panel>
                    <ProgressBar value={50} />
                    <Button label="Button" />
                    <Dialog header="Dialog Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
                        <p className="m-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                    </Dialog>
                    <Menu model={items} />
                </div>
            </div>
        </>
    );
}
```

--------------------------------

### Basic useDebounce Example

Source: https://primereact.org/hooks/usedebounce

This example demonstrates how the debounced value is updated only after a delay of 400ms between keystrokes. It's useful for scenarios like search input where you don't want to trigger an action on every single character typed.

```javascript
<InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<span className="text-xl">
    Debounced Value: <strong>{debouncedValue}</strong>
</span>
```

--------------------------------

### Basic IconField Usage

Source: https://primereact.org/iconfield

Demonstrates the basic setup of IconField with left-aligned and default icon positioning.

```jsx
<IconField iconPosition="left">
    <InputIcon className="pi pi-search"> </InputIcon>
    <InputText placeholder="Search" />
</IconField>

<IconField>
    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
    <InputText />
</IconField>
```

--------------------------------

### Dialog with Maximizable Property

Source: https://primereact.org/dialog

Use the `maximizable` property to enable full-screen mode for the dialog. This example shows a basic dialog setup with a button to trigger its visibility.

```jsx
<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
<Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
    <p className="m-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</Dialog>
```

--------------------------------

### Basic ConfirmDialog Setup

Source: https://primereact.org/confirmdialog

Include the ConfirmDialog component and a button to trigger the confirmation dialog using the confirmDialog function.

```javascript
<Toast ref={toast} />
<ConfirmDialog />
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
```

--------------------------------

### Basic ContextMenu Setup

Source: https://primereact.org/contextmenu

A basic ContextMenu requires a model for its items and the show method must be called explicitly using the onContextMenu event of the target element.

```jsx
<ContextMenu model={items} ref={cm} breakpoint="767px" />
<img src="/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
```

--------------------------------

### Menubar with Start and End Templates

Source: https://primereact.org/menubar

Custom content can be placed at the start and end of the Menubar using the 'start' and 'end' template properties.

```jsx
<Menubar model={items} start={start} end={end} />
```

--------------------------------

### Vertical Splitter Example

Source: https://primereact.org/splitter

Create a vertical Splitter by setting the 'layout' property to 'vertical'. Panels will be stacked.

```jsx
<Splitter style={{ height: '300px' }} layout="vertical">
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>
```

--------------------------------

### Basic useOverlayListener Example

Source: https://primereact.org/hooks/useoverlaylistener

Initialize the hook with target and overlay elements, a listener function, and options. The listener is activated when the 'when' condition is true.

```javascript
const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
    target: buttonRef.current,
    overlay: overlayRef.current,
    listener: handleScroll,
    options: { passive: true },
    when: visible
});
```

--------------------------------

### Run Freya Template Development Server

Source: https://primereact.org/templates/freya

Start the development server for the Freya template using npm or yarn. This command is used to preview the template during development.

```bash
npm run dev or yarn dev
```

--------------------------------

### Basic MegaMenu Setup

Source: https://primereact.org/megamenu

Render a basic MegaMenu by providing a collection of menu items to the 'model' property. The 'breakpoint' property controls responsiveness.

```jsx
<MegaMenu model={items}  breakpoint="960px" />
```

--------------------------------

### Responsive Galleria Setup

Source: https://primereact.org/galleria

Configure Galleria's responsiveness using the 'responsiveOptions' property to adjust 'numVisible' based on screen size.

```jsx
<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }}
    item={itemTemplate} thumbnail={thumbnailTemplate} />
```

--------------------------------

### Basic TieredMenu Setup

Source: https://primereact.org/tieredmenu

A basic TieredMenu requires a collection of menu items defined in the 'model' property.

```javascript
<TieredMenu model={items} breakpoint="767px" />
```

--------------------------------

### Basic TabView Example

Source: https://primereact.org/tabview

A basic TabView with three TabPanel components, each containing distinct content. Ensure TabView and TabPanel are imported before use.

```jsx
<TabView>
    <TabPanel header="Header I">
        <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </TabPanel>
    <TabPanel header="Header II">
        <p className="m-0">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
        </p>
    </TabPanel>
    <TabPanel header="Header III">
        <p className="m-0">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
        </p>
    </TabPanel>
</TabView>
```

--------------------------------

### Horizontal Splitter Example

Source: https://primereact.org/splitter

A basic horizontal Splitter with two panels. Panels are displayed side-by-side by default.

```jsx
<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>
```

--------------------------------

### Basic Dialog Example

Source: https://primereact.org/dialog

A simple implementation of the Dialog component. Ensure the Dialog is controlled by the 'visible' prop and the 'onHide' callback.

```jsx
<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => onHide('displayBasic')}>
    Content
</Dialog>
```

--------------------------------

### Basic useUpdateEffect Example

Source: https://primereact.org/hooks/useupdateeffect

This example demonstrates how to use useUpdateEffect to show an info message when the 'value' state changes. The effect runs only after the initial render and subsequent updates to 'value'.

```javascript
const toast = useRef(null);
const [value, setValue] = useState('');

useUpdateEffect(() => {
    toast.current.show({ severity: 'info', summary: 'Updated' });
}, [value]);
```

--------------------------------

### Install Quill - Editor Dependency

Source: https://primereact.org/editor

The Editor component relies on Quill, so it must be installed as a project dependency.

```bash
npm install quill
```

--------------------------------

### Basic Counter Example

Source: https://primereact.org/hooks/usecounter

A simple counter with increment, decrement, and reset functions. Use this for basic numerical state management.

```javascript
<span className="font-bold text-4xl mb-5">{count}</span>
<div className="flex flex-wrap gap-3">
    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
</div>
```

--------------------------------

### Clone PrimeReact Repository

Source: https://primereact.org/contribution

Clone the PrimeReact repository from GitHub to start contributing.

```bash
git clone https://github.com/primefaces/primereact.git
cd primereact
```

--------------------------------

### Basic OrderList Usage

Source: https://primereact.org/orderlist

A basic OrderList example demonstrating controlled input with 'value' and 'onChange' properties. Define list item content using the 'itemTemplate' property.

```jsx
<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
```

--------------------------------

### Basic useTimeout Example

Source: https://primereact.org/hooks/usetimeout

Execute a callback function after a 3-second delay. The hook returns a function to clear the timeout.

```javascript
const [clearTimeout] = useTimeout(() => {
    toast.current.show({ severity: 'info', summary: 'Loaded' });
}, 3000);
```

--------------------------------

### ContextMenu with Command Execution

Source: https://primereact.org/contextmenu

Define a callback function for the command property to execute when a ContextMenu item is activated. This example demonstrates a list of users with context menu actions.

```jsx
<ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
    {users.map((user) => (
        <li
            key={user.id}
            className={`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between ${selectedUser?.id === user.id && 'border-primary'}`}
            onContextMenu={(event) => onRightClick(event, user)}
        >
            <div className="flex align-items-center gap-2">
                <img alt="user.name" src={`https://primefaces.org/cdn/primereact/images/avatar/${user.image}`} style={{ width: '32px' }} />
                <span className="font-bold">{user.name}</span>
            </div>
            <Tag value={user.role} severity={getBadge(user)} />
        </li>
    ))}
</ul>
<ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
<Toast ref={toast} />
```

--------------------------------

### Galleria with Navigators and Indicators

Source: https://primereact.org/galleria

Combine item navigators with indicators for a comprehensive navigation experience. This example also hides thumbnails.

```jsx
<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} 
    showItemNavigators showItemNavigatorsOnHover showIndicators
    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
```

--------------------------------

### Basic Card Example

Source: https://primereact.org/card

A simple Card is created with a title property and content as children. Suitable for displaying basic information.

```javascript
<Card title="Simple Card">
    <p className="m-0">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
        numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
    </p>
</Card>
```

--------------------------------

### Implement Custom Sidebar UI with Headless Mode

Source: https://primereact.org/sidebar

Use the 'content' prop to define your own sidebar UI. This example shows a basic structure with navigation items and a close button.

```jsx
<Sidebar
    visible={visible}
    onHide={() => setVisible(false)}
    content={({ closeIconRef, hide }) => (
        <div className="min-h-screen flex relative lg:static surface-ground">
            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                <div className="flex flex-column h-full">
                    <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                        <span className="inline-flex align-items-center gap-2">
                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="..."
                                    fill="var(--primary-color)"
                                />
                                <path
                                    d="..."
                                    fill="var(--text-color)"
                                />
                            </svg>
                            <span className="font-semibold text-2xl text-primary">Your Logo</span>
                        </span>
                        <span>
                            <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem"></Button>
                        </span>
                    </div>
                    <div className="overflow-y-auto">
                        <ul className="list-none p-3 m-0">
                            <li>
                                <StyleClass nodeRef={btnRef1} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                    <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
                                        <span className="font-medium">FAVORITES</span>
                                        <i className="pi pi-chevron-down"></i>
                                        <Ripple />
                                    </div>
                                </StyleClass>
                                <ul className="list-none p-0 m-0 overflow-hidden">
                                    <li>
                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
                                            <i className="pi pi-home mr-2"></i>
                                            <span className="font-medium">Dashboard</span>
                                            <Ripple />
                                        </a>
                                    </li>
                                    <li>
                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
                                            <i className="pi pi-bookmark mr-2"></i>
                                            <span className="font-medium">Bookmarks</span>
                                            <Ripple />
                                        </a>
                                    </li>
                                    <li>
                                        <StyleClass nodeRef={btnRef2} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
                                            <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
                                                <i className="pi pi-chart-line mr-2"></i>
                                                <span className="font-medium">Reports</span>
                                                <i className="pi pi-chevron-down ml-auto mr-1"></i>
                                                <Ripple />
                                            </a>
                                        </StyleClass>
                                        <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
                                            <li>

```

--------------------------------

### Basic useClickOutside Example

Source: https://primereact.org/hooks/useclickoutside

Demonstrates how to use the useClickOutside hook to manage the visibility of a popup element. The popup is shown on button click and hidden when a click occurs outside the popup's ref.

```jsx
<div className="relative">
    <Button onClick={() => setVisible(true)} label="Show" />
    {visible ? (
        <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
            Popup Content
        </div>
    ) : null}
</div>
```

--------------------------------

### Basic DataScroller

Source: https://primereact.org/datascroller

Displays data with on demand loading using scroll. Configure the 'value', 'itemTemplate', 'rows', and 'buffer' properties for initial setup.

```javascript
<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
```

--------------------------------

### Basic Accordion Example

Source: https://primereact.org/accordion

A basic Accordion with predefined headers and content. Use the activeIndex property to set the initially expanded tab.

```jsx
<Accordion activeIndex={0}>
    <AccordionTab header="Header I">
        <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </AccordionTab>
    <AccordionTab header="Header II">
        <p className="m-0">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            Consectetur, adipisci velit, sed quia non numquam eius modi.
        </p>
    </AccordionTab>
    <AccordionTab header="Header III">
        <p className="m-0">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
        </p>
    </AccordionTab>
</Accordion>
```

--------------------------------

### Sample InputOtp Implementation

Source: https://primereact.org/inputotp

A sample UI implementation demonstrating templating, length configuration, and styling for OTP authentication.

```javascript
<div className="flex flex-column align-items-center">
    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
    <div className="flex justify-content-between mt-5 align-self-stretch">
        <Button label="Resend Code" link className="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>
         
```

--------------------------------

### Regex for Whole Word Validation

Source: https://primereact.org/keyfilter

Use the 'validateOnly' property along with a regular expression to validate the entire input word. This example allows only a '+' at the start followed by digits.

```javascript
<InputText id="numkeys" keyfilter={/^[+]?(\d{1,12})?$/} validateOnly onInput={validateInput} />
```

--------------------------------

### Headless Toast Mode

Source: https://primereact.org/toast

Enable headless mode by providing a _content_ prop to implement a completely custom dialog UI. This example shows a custom upload progress indicator.

```jsx
<Toast
    ref={toast}
    content={({ message }) => (
        <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
            <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
            <div className="flex flex-column gap-3 w-full">
                <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
                <p className="m-0 text-base text-700">{message.detail}</p>
                <div className="flex flex-column gap-2">
                    <ProgressBar value={progress} showValue="false"></ProgressBar>
                    <label className="text-right text-xs text-white">{progress}% uploaded...</label>
                </div>
                <div className="flex gap-3 mb-3">
                    <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
                    <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
                </div>
            </div>
        </section>
    )}
></Toast>
<Button onClick={show} label="View" />
             
```

--------------------------------

### Advanced Galleria Implementation

Source: https://primereact.org/galleria

An advanced Galleria setup demonstrating a custom UI with various features including navigators, autoplay, and a custom footer. The `itemTemplate` and `thumbnailTemplate` props are used for custom rendering.

```jsx
<Galleria ref={galleria} value={images} activeIndex={activeIndex} onItemChange={onItemChange}
    showThumbnails={showThumbnails} showItemNavigators showItemNavigatorsOnHover
    numVisible={5} circular autoPlay transitionInterval={3000} responsiveOptions={responsiveOptions}
    item={itemTemplate} thumbnail={thumbnailTemplate} footer={footer}
    style={{ maxWidth: '640px' }} className={galleriaClassName} />
```

--------------------------------

### Divider with Login Form Example

Source: https://primereact.org/divider

This snippet demonstrates a login form layout using a vertical divider for separation on larger screens and a horizontal divider on smaller screens. It includes input fields for username and password, a login button, and a sign-up button.

```jsx
<div className="card">
    <div className="flex flex-column md:flex-row">
        <div className="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
            <div className="flex flex-wrap justify-content-center align-items-center gap-2">
                <label className="w-6rem">Username</label>
                <InputText id="username" type="text" className="w-12rem" />
            </div>
            <div className="flex flex-wrap justify-content-center align-items-center gap-2">
                <label className="w-6rem">Password</label>
                <InputText id="password" type="password" className="w-12rem" />
            </div>
            <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto"></Button>
        </div>
        <div className="w-full md:w-2">
            <Divider layout="vertical" className="hidden md:flex">
                <b>OR</b>
            </Divider>
            <Divider layout="horizontal" className="flex md:hidden" align="center">
                <b>OR</b>
            </Divider>
        </div>
        <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
            <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem"></Button>
        </div>
    </div>
</div>
```

--------------------------------

### Basic Steps Usage

Source: https://primereact.org/steps

Render the Steps component with a collection of menuitems defined in the 'model' property.

```javascript
<Steps model={items} />
 

```

--------------------------------

### Toast Positioning

Source: https://primereact.org/toast

Control the message location with the _position_ property. Examples include top-left, bottom-left, and bottom-right.

```jsx
<Toast ref={toastTL} position="top-left" />
<Toast ref={toastBL} position="bottom-left" />
<Toast ref={toastBR} position="bottom-right" />
<Button label="Top Left" className="mr-2" onClick={showTopLeft} />
<Button label="Bottom Left" className="p-button-warning" onClick={showBottomLeft} />
<Button label="Bottom Right" className="p-button-success" onClick={showBottomRight} />
         
```

--------------------------------

### Text SplitButton Examples

Source: https://primereact.org/splitbutton

Text SplitButtons are displayed as textual elements. Various severity options are available.

```jsx
<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
```

--------------------------------

### Import DataView and DataViewLayoutOptions

Source: https://primereact.org/dataview

Import the necessary components for DataView and layout options.

```javascript
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
```

--------------------------------

### Splitter with Size and MinSize

Source: https://primereact.org/splitter

Configure initial panel dimensions using the 'size' property and set minimum sizes with 'minSize' to control resizing behavior.

```jsx
<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
</Splitter>
```

--------------------------------

### Raised Text SplitButton Examples

Source: https://primereact.org/splitbutton

Text SplitButtons can be displayed as raised for elevation. Various severity options are available.

```jsx
<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
```

--------------------------------

### Paginator for Image Gallery

Source: https://primereact.org/paginator

Example of using Paginator to navigate through a collection of images, where each page displays a single image.

```jsx
<Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />

<div className="p-3 text-center">
    <img alt={first} src={`https://primefaces.org/cdn/primereact/images/nature/nature${first + 1}.jpg`} className="shadow-2 border-round max-w-full" />
</div>
```

--------------------------------

### Basic Dock

Source: https://primereact.org/dock

Configure a basic Dock with a model and position. The default position is 'bottom', but 'top', 'left', and 'right' are also available.

```javascript
<Dock model={items} position="{position}" />
```

--------------------------------

### Basic useUnmountEffect Example

Source: https://primereact.org/hooks/useunmounteffect

A message is displayed in the browser console when the component is unmounted. Ensure you have a toast instance available.

```javascript
useUnmountEffect(() => {
    toast.current && toast.current.show({ severity: 'info', summary: 'Unmounted' });
});
```

--------------------------------

### Responsive Button Alignment with PrimeFlex

Source: https://primereact.org/theming

Demonstrates how to align buttons horizontally on larger screens and stack them on smaller screens using PrimeFlex utility classes.

```jsx
<div className="flex flex-column md:flex-row justify-content-between my-5">
    <Button type="button" label="Button 1" className="mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 3" className="p-button-help"></Button>
</div>
```

--------------------------------

### Import Built-in Themes

Source: https://primereact.org/theming

These are the available themes in the npm distribution. Copy them to your project's public folder to use them.

```css
primereact/resources/themes/bootstrap4-light-blue/theme.css
```

```css
primereact/resources/themes/bootstrap4-light-purple/theme.css
```

```css
primereact/resources/themes/bootstrap4-dark-blue/theme.css
```

```css
primereact/resources/themes/bootstrap4-dark-purple/theme.css
```

```css
primereact/resources/themes/md-light-indigo/theme.css
```

```css
primereact/resources/themes/md-light-deeppurple/theme.css
```

```css
primereact/resources/themes/md-dark-indigo/theme.css
```

```css
primereact/resources/themes/md-dark-deeppurple/theme.css
```

```css
primereact/resources/themes/mdc-light-indigo/theme.css
```

```css
primereact/resources/themes/mdc-light-deeppurple/theme.css
```

```css
primereact/resources/themes/mdc-dark-indigo/theme.css
```

```css
primereact/resources/themes/mdc-dark-deeppurple/theme.css
```

```css
primereact/resources/themes/tailwind-light/theme.css
```

```css
primereact/resources/themes/fluent-light/theme.css
```

```css
primereact/resources/themes/lara-light-blue/theme.css
```

```css
primereact/resources/themes/lara-light-indigo/theme.css
```

```css
primereact/resources/themes/lara-light-purple/theme.css
```

```css
primereact/resources/themes/lara-light-teal/theme.css
```

```css
primereact/resources/themes/lara-dark-blue/theme.css
```

```css
primereact/resources/themes/lara-dark-indigo/theme.css
```

```css
primereact/resources/themes/lara-dark-purple/theme.css
```

```css
primereact/resources/themes/lara-dark-teal/theme.css
```

```css
primereact/resources/themes/soho-light/theme.css
```

```css
primereact/resources/themes/soho-dark/theme.css
```

```css
primereact/resources/themes/viva-light/theme.css
```

```css
primereact/resources/themes/viva-dark/theme.css
```

```css
primereact/resources/themes/mira/theme.css
```

```css
primereact/resources/themes/nano/theme.css
```

```css
primereact/resources/themes/saga-blue/theme.css
```

```css
primereact/resources/themes/saga-green/theme.css
```

```css
primereact/resources/themes/saga-orange/theme.css
```

```css
primereact/resources/themes/saga-purple/theme.css
```

```css
primereact/resources/themes/vela-blue/theme.css
```

```css
primereact/resources/themes/vela-green/theme.css
```

```css
primereact/resources/themes/vela-orange/theme.css
```

```css
primereact/resources/themes/vela-purple/theme.css
```

```css
primereact/resources/themes/arya-blue/theme.css
```

```css
primereact/resources/themes/arya-green/theme.css
```

```css
primereact/resources/themes/arya-orange/theme.css
```

```css
primereact/resources/themes/arya-purple/theme.css
```

--------------------------------

### Import MultiStateCheckbox

Source: https://primereact.org/multistatecheckbox

Import the MultiStateCheckbox component from the primereact library.

```javascript
import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
```

--------------------------------

### Basic useInterval Example

Source: https://primereact.org/hooks/useinterval

A simple timer that updates a seconds counter every second. The interval is controlled by an 'active' condition.

```javascript
useInterval(
    () => {
        setSeconds((prevSecond) => (prevSecond === 59 ? 0 : prevSecond + 1)); //fn
    },
    1000,   //delay (ms)
    active  //condition (when)
);
```

--------------------------------

### Outlined SplitButton Examples

Source: https://primereact.org/splitbutton

Outlined SplitButtons display a border without a background initially. Various severity options are available.

```jsx
<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
```

--------------------------------

### Import Splitter and SplitterPanel

Source: https://primereact.org/splitter

Import the necessary components for using the Splitter.

```javascript
import { Splitter, SplitterPanel } from 'primereact/splitter';
```

--------------------------------

### Image with Preview

Source: https://primereact.org/image

Enable the preview prop to display a modal with transformation options like rotating and zooming when the image is clicked.

```jsx
<Image src="/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
```

--------------------------------

### Basic Usage

Source: https://primereact.org/confirmdialog

A ConfirmDialog component needs to be present on the page that is interacted with the _confirmDialog_ function that takes a configuration object for customization.

```APIDOC
## Basic
A ConfirmDialog component needs to be present on the page that is interacted with the _confirmDialog_ function that takes a configuration object for customization.
```html
<Toast ref={toast} />
<ConfirmDialog />
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
```
```

--------------------------------

### Import Styled Mode Theme

Source: https://primereact.org/installation

Include a theme CSS file for styled mode. Ensure the path matches the chosen theme, e.g., 'lara-light-cyan'.

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

--------------------------------

### Galleria without Thumbnails

Source: https://primereact.org/galleria

A simple Galleria setup that displays only indicators for navigation, hiding the thumbnails by setting `showThumbnails` to false.

```jsx
<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators 
    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
```

--------------------------------

### Radar Chart

Source: https://primereact.org/chart

A radar chart displays multivariate data in a two-dimensional chart with axes starting from the same point. Use 'radar' as the type.

```jsx
<Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
         
```

--------------------------------

### Import PickList

Source: https://primereact.org/picklist

Import the PickList component from the primereact/picklist module.

```javascript
import { PickList } from 'primereact/picklist';
```

--------------------------------

### Attach Event Listener to Document

Source: https://primereact.org/hooks/useeventlistener

Attach event listeners to the document object. This example shows how to bind keydown and keyup events.

```javascript
const [bindKeyDown, unbindKeyDown] = useEventListener({
    type: 'keydown',
    listener: (e) => {
        onKeyDown(e);
    }
});

const [bindKeyUp, unbindKeyUp] = useEventListener({
    type: 'keyup',
    listener: (e) => {
        setPressed(false);
    }
});
```

--------------------------------

### Basic PanelMenu

Source: https://primereact.org/panelmenu

Render a basic PanelMenu with a collection of menu items.

```jsx
<PanelMenu model={items} className="w-full md:w-20rem" />
```

--------------------------------

### Configure PrimeReact Application

Source: https://primereact.org/installation

Wrap your application with PrimeReactProvider to enable context for all components. This is typically done in your main application file (e.g., _app.js for Next.js).

```javascript
// _app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}
```

--------------------------------

### Implement Dynamic Column Toggling

Source: https://primereact.org/datatable

Control column visibility dynamically. This example uses a MultiSelect component to manage which columns are displayed in the DataTable.

```jsx
<DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" />
    {visibleColumns.map((col) => (
        <Column key={col.field} field={col.field} header={col.header} />
    ))}
</DataTable>
```

--------------------------------

### Selection Events in TreeTable

Source: https://primereact.org/treetable

Listen for selection events using onSelect and onUnselect properties. This example demonstrates single selection with event handlers.

```jsx
<TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey}
        onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={false}
        onSelect={onSelect} onUnselect={onUnselect} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
```

--------------------------------

### Basic VirtualScroller

Source: https://primereact.org/virtualscroller

Configure a basic VirtualScroller with items, item size, and item template. Set viewport dimensions using CSS or properties.

```jsx
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
```

--------------------------------

### Full Screen Galleria with Thumbnails

Source: https://primereact.org/galleria

Enable full-screen mode with 'fullScreen' and control its visibility using the 'show()' method via a ref. Item navigators are also enabled.

```jsx
<Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }}
    circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />

<Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
```

--------------------------------

### DeferredContent with DataTable

Source: https://primereact.org/deferredcontent

A practical example demonstrating lazy loading a DataTable. The table data will only be fetched and rendered when the DeferredContent component scrolls into the viewport.

```jsx
<DeferredContent onLoad={onDataLoad}>
    <DataTable value={products}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
    </DataTable>
</DeferredContent>
```

--------------------------------

### Import InputOtp

Source: https://primereact.org/inputotp

Import the InputOtp component from the PrimeReact library.

```javascript
import { InputOtp } from 'primereact/inputotp';
         
```

--------------------------------

### Carousel with Custom Scroll Amount

Source: https://primereact.org/carousel

Control the number of items that scroll at once using the 'numScroll' property. This example scrolls one item at a time.

```jsx
<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
         
```
Tokens:
Raw