useInplace

Hook that manages inline display-to-edit toggling with keyboard and state support.

Click to edit

basic-demo

Usage#

import { useInplace } from '@primereact/headless/inplace';
 
const { rootProps, displayProps, closeProps, state } = useInplace();
 
return (
    <div {...rootProps}>
        {!state.active ? (
            <div {...displayProps}></div>
        ) : (
            <div>
                <input />
                <button {...closeProps}></button>
            </div>
        )}
    </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#

Returns spread-ready prop objects (rootProps, displayProps, closeProps)
Controlled and uncontrolled active state management
Exposes imperative open() and close() methods
Built-in keyboard handler for display element (Enter/Space)

Behavior#

Default Active#

Use defaultActive to start in edit mode.

const inplace = useInplace({ defaultActive: true });

Controlled#

Use active and onActiveChange for programmatic control. The hook never updates its own state in controlled mode.

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

Disabled#

Set disabled to prevent the display from being clicked or focused.

const inplace = useInplace({ disabled: true });

When disabled, displayProps suppresses onClick and onKeyDown handlers and adds data-disabled.

Using `open` and `close`#

The hook exposes imperative methods for programmatic toggling outside the standard display/close flow.

const inplace = useInplace();
 
// Programmatically open
inplace.open();
 
// Programmatically close
inplace.close();

Conditional Rendering with `state.active`#

Use state.active to conditionally mount or unmount content.

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

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

Name	Type	Default
`active`	`boolean`	`false`
Whether the content is displayed or not.
`defaultActive`	`boolean`	`false`
Whether the content is displayed or not.
`disabled`	`boolean`	`false`
Whether the component is disabled.
`onActiveChange`	`(event: useInplaceChangeEvent) => void`	—
Callback function that is called when the element is clicked.

Accessibility#

See Inplace Primitive for WAI-ARIA compliance details and keyboard support.