useInplace

Usage#

import { useInplace } from '@primereact/headless/inplace';

const { rootProps, displayProps, closeProps, state } = useInplace();
 
<div {...rootProps}>
    {!state.active ? (
        <div {...displayProps}></div>

useInplace manages the display/content toggle and returns prop objects for the container, display, and close elements — see Primitive for a component-based API.

Features#

• Active-state lifecycle — controlled or uncontrolled toggling between display and edit modes
• Imperative controls — open() and close() for programmatic toggling outside the standard click/close flow
• Keyboard activation — built-in Enter/Space handler on displayProps to enter edit mode
• Data-driven styling — data-active, data-inactive, and data-disabled attributes expose state without className juggling
• Disabled mode — suppresses click and keyboard handlers and marks the root with data-disabled

Working with callbacks#

Controlled active state#

Drive the toggle from external state by pairing active with onActiveChange. The hook never mutates its own state in controlled mode.

const [active, setActive] = React.useState(false);
 
const inplace = useInplace({
    active,
    onActiveChange: (e) => setActive(e.active)
});

Closing after a save#

Use close() imperatively so the edit surface exits after the underlying action completes.

const inplace = useInplace();
 
const onSave = async () => {
    await save();
    inplace.close();
};

Rendering edit content conditionally#

Gate the edit surface on state.active so inputs mount only while the inplace is active — useful for forms that need a fresh defaultValue each time.

const { rootProps, displayProps, closeProps, state } = useInplace();
 
<div {...rootProps}>
    {!state.active ? (
        <div {...displayProps}>Edit name</div>
    ) : (
        <div>
            <input defaultValue={name} />
            <button {...closeProps}>Cancel</button>
        </div>
    )}
</div>;

Styling with data attributes#

Every prop object includes data-scope="inplace" and a data-part attribute. State-dependent attributes (data-active, data-inactive, data-disabled) are added automatically.

[data-scope='inplace'][data-part='display'] {
    cursor: pointer;
    padding: 0.5rem;
}
 
[data-scope='inplace'][data-part='display'][data-inactive]:hover {
    background-color: #f3f4f6;
}
 
[data-scope='inplace'][data-part='root'][data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}

API#

useInplace#

Accessibility#

Enter or Space activates edit mode, Escape cancels, and focus returns to the display on exit. See Primitive for full WAI-ARIA compliance details.