React Inplace

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

Setup

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

Import

import { Inplace } from 'primereact/inplace';

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>

Theming

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

Resources

Visit the PrimeReact Inplace showcase for demos and documentation.