PrimeTek UI Component Libraries
React Sidebar

React Sidebar

PrimeTek's photo
PrimeTek
·

2 min read

React Sidebar is a panel component displayed as an overlay.

Setup

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

Import

import { Sidebar } from 'primereact/sidebar';

Getting Started

Sidebar is used as a container and visibility is controlled with visible property.

<Sidebar visible={visible} onHide={() => setVisible(false)}>
    Content
</Sidebar>

<Button icon="pi pi-arrow-right" onClick={(e) => setVisible(true)}/>

Position

Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.

<Sidebar visible={visible} position="right" onHide={() => setVisible(false)}>
    Content
</Sidebar>

Size

Sidebar size can be changed using a fixed value or using one of the three predefined ones.

<Sidebar visible={visible} position="right" className="ui-sidebar-sm" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" className="ui-sidebar-md" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" className="ui-sidebar-lg" onHide={() => setVisible(false)}></Sidebar>
<Sidebar visible={visible} position="right" style={{width:'30em'}} onHide={() => setVisible(false)}></Sidebar>

Full Screen

Full screen mode allows the sidebar to cover whole screen.

<Sidebar visible={visible} fullScreen onHide={() => setVisible(false)}}>
    Content
</Sidebar>

Custom toolbar

Additional content can be provided using the icons property.

<Sidebar visible={visibleCustomToolbar} onHide={() => setVisibleCustomToolbar(false)} icons={() => (
    <React.Fragment>
        <button className="p-sidebar-close p-link">
            <span className="p-sidebar-close-icon pi pi-print"/>
        </button>
        <button className="p-sidebar-close p-link">
            <span className="p-sidebar-close-icon pi pi-arrow-right"/>
        </button>
    </React.Fragment>
)}>
    <h1 style={{fontWeight:'normal'}}>Sidebar with custom icons</h1>
    <Button type="button" onClick={(e) => setVisibleCustomToolbar(false)} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
    <Button type="button" onClick={(e) => setVisibleCustomToolbar(false)} label="Cancel" className="p-button-secondary"/>
</Sidebar>

Theming

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

Resources

Visit the PrimeReact Sidebar showcase for demos and documentation.

ReactJavaScriptWeb Development