Inplace

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

Input

Click to Edit

Image

View Picture

Lazy Data

View Data

Import via Module


import { Inplace } from 'primereact/inplace';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/inplace/inplace.min.js"></script>

Getting Started

Inplace requires InplaceDisplay and InplaceContent component as children to define the content to display in each state. Active state of the inplace can either be managed as a Controlled or Uncontrolled component.

In controlled mode, active and onToggle properties need to be defined to control the active state.


<Inplace active={active} onToggle={(e) => setActive(e.value)}>
    <InplaceDisplay>
        Click to Edit
    </InplaceDisplay>
    <InplaceContent>
        <InputText />
    </InplaceContent>
</Inplace>

In uncontrolled mode, no additional properties are required. Initial state can be still be provided using the active property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the active state, prefer to use the component as controlled.


<Inplace>
    <InplaceDisplay>
        Click to Edit
    </InplaceDisplay>
    <InplaceContent>
        <InputText autoFocus />
    </InplaceContent>
</Inplace>

Closable

closable property is handy within forms as it enables to get back to output mode after editing is completed using a button displayed next to the form field.


<Inplace closable>
    <InplaceDisplay>
        Click to Edit
    </InplaceDisplay>
    <InplaceContent>
        <InputText autoFocus />
    </InplaceContent>
</Inplace>

Lazy Loading

Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.


const onOpen = () => {
    productService.getProductsSmall().then(data => setProducts(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>

Properties

Name	Type	Default	Description
style	object	null	Inline style of the element.
className	string	null	Style class of the element.
active	boolean	false	Whether the content is displayed or not.
closable	boolean	false	Displays a button to switch back to display mode.
disabled	boolean	false	When present, it specifies that the element should be disabled.
tabIndex	number	null	Index of the element in tabbing order.

Events

Name	Parameters	Description
onOpen	event: browser event	Callback to invoke when inplace is opened.
onClose	event: browser event	Callback to invoke when inplace is closed.
onToggle	event.originalEvent: browser event event.value: active state as a boolean	Callback to invoke when inplace is opened or closed.