PrimeTek UI Component Libraries
React Dialog

React Dialog

PrimeTek's photo
PrimeTek
·

2 min read

React Dialog is a container to display content in an overlay window.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Dialog } from 'primereact/dialog';

Getting Started

Dialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.

<Button label="Show" icon="pi pi-external-link" onClick={() => onClick('displayBasic')} />

<Dialog header="Header" visible={displayBasic} style={{ width: '50vw' }} footer={renderFooter('displayBasic')} onHide={() => onHide('displayBasic')}>
    <p>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>

Header and Footer sections are defined using properties with the same name that accept simple strings or JSX for custom content. In addition icons property enables adding more icons at the header section.

const footer = (
    <div>
        <Button label="Yes" icon="pi pi-check" onClick={onHide} />
        <Button label="No" icon="pi pi-times" onClick={onHide} />
    </div>
);

const myIcon = (
    <button className="p-dialog-titlebar-icon p-link">
        <span className="pi pi-search"></span>
    </button>
)

<Dialog header="Header Text" footer={footer} icons={myIcon} visible={visible} style={{width: '50vw'}} modal onHide={onHide}>
    Content
</Dialog>

Dynamic Content

Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar.

Theming

Dialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Dialog showcase for demos and documentation.

ReactJavaScriptWeb Development