Source: https://primereact.org/inplace/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Inplace

Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.

Import#

import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';

Copy

Basic#

Inplace component requires InplaceDisplay for display mode and InplaceContent to reveal as the actual content.

View Content

<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>

Copy

Input#

Inplace can be used within a form to display a value as read only before making it editable. The closable property adds a close button next to the content to switch back to read only mode.

Click to Edit

 <Inplace closable>
    <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
    <InplaceContent>
        <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
    </InplaceContent>
</Inplace>

Copy

Image#

Any content such as an image can be placed inside an Inplace.

View Picture

<Inplace>
    <InplaceDisplay>
        <span className="inline-flex align-items-center">
            <span className="pi pi-image"></span>
            <span className="ml-2">View Picture</span>
        </span>
    </InplaceDisplay>
    <InplaceContent>
        <img className="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
    </InplaceContent>
</Inplace>

Copy

Lazy#

Using the onOpen event, data can be loaded in a lazy manner before displaying it in a table.

View Data

<Inplace onOpen={onOpen}>
    <InplaceDisplay>
        View Data
    </InplaceDisplay>
    <InplaceContent>
        <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>
    </InplaceContent>
</Inplace>

Copy

Accessibility#

Screen Reader

Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.

Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view mode or even overriding the default role.

Closable inplace components displays a button with an aria-label that refers to the aria.close property of the locale API by default, you may use_closeButtonProps_ to customize the element and override the default aria-label.

View Mode Keyboard Support

| Key | Function | | --- | --- | | enter | Switches to content. |

Close Button Keyboard Support

| Key | Function | | --- | --- | | enter | Switches to display. | | space | Switches to display. |

Import
Basic
Input
Image
Lazy
Accessibility

PrimeReact 10.9.7 by PrimeTek