useCompare

Hook that manages compare slider state, pointer interactions, and clip-path positioning.

basic-demo

Usage#

import { useCompare } from '@primereact/headless/compare';
 
const compare = useCompare({ defaultValue: 50 });
 
return (
    <div {...compare.rootProps}>
        <div {...compare.getItemProps('after')}></div>
        <div {...compare.getItemProps('before')}></div>
        <div {...compare.handleProps}>
            <div {...compare.getIndicatorProps()}></div>
        </div>
        <input {...compare.inputProps} />
    </div>
);

useCompare manages pointer tracking, clip-path computation, and keyboard input for a before/after comparison — see Primitive for a component-based API.

Features#

Built on top of useSlider — inherits all slider behavior (drag, keyboard, step, min/max)
Returns spread-ready prop objects (rootProps, handleProps, inputProps, getItemProps, getIndicatorProps)
getItemProps('before' | 'after') computes clipPath styles for each layer
slideOnHover mode updates position on pointer move without requiring a drag
Exposes state.value and state.isDragging for custom rendering logic

Behavior#

Default Value#

Use defaultValue to set the initial split position as a percentage.

const compare = useCompare({ defaultValue: 50 });

Controlled#

Use value and onValueChange for full programmatic control.

const [value, setValue] = React.useState(50);
const compare = useCompare({
    value,
    onValueChange: (e) => setValue(e.value)
});

Slide on Hover#

Set slideOnHover to move the divider as the pointer hovers over the component, without requiring a drag gesture.

const compare = useCompare({ slideOnHover: true });

Orientation#

Set orientation to 'vertical' for a top-to-bottom comparison layout.

const compare = useCompare({ orientation: 'vertical' });

Disabled#

Set disabled to prevent all pointer and keyboard interaction.

const compare = useCompare({ disabled: true });

Using `state.value` and `state.isDragging`#

The hook exposes reactive state for custom UI logic.

const compare = useCompare({ defaultValue: 50 });
 
<span>{compare.state.value}%</span>;
{
    compare.state.isDragging && <span>Dragging...</span>;
}

Custom Styling with Data Attributes#

Prop objects include orientation and state-dependent data attributes.

[data-orientation='horizontal'] {
    cursor: ew-resize;
}
 
[data-orientation='vertical'] {
    cursor: ns-resize;
}
 
[data-dragging] {
    cursor: grabbing;
}

API#

useCompare#

Name	Type	Default
`slideOnHover`	`boolean`	—
Whether slider moves on hover.
`tabIndex`	`number`	—
The tab index of the hidden input.
`ariaLabel`	`string`	—
Establishes a string value that labels the component.
`ariaLabelledby`	`string`	—
Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback fired when the hidden input is focused.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback fired when the hidden input loses focus.
`value`	`number` \| `number[]`	—
Value of the component.
`defaultValue`	`number` \| `number[]`	—
The default value for the input when not controlled by `value` .
`min`	`number`	`0`
Mininum boundary value.
`max`	`number`	`100`
Maximum boundary value.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Orientation of the slider.
`step`	`number`	`1`
Step factor to increment/decrement the value.
`onValueChange`	`(event: useSliderChangeEvent) => void`	—
Callback fired when the ToggleButton's pressed state changes.
`onValueChangeEnd`	`(event: useSliderChangeEvent) => void`	—
Callback fired when the pointer interaction ends.
`disabled`	`boolean`	`false`
Whether the component is disabled.
`readOnly`	`boolean`	`false`
Whether the component is read-only.
`invalid`	`boolean`	`false`
When present, it specifies that the element should be invalid.

Accessibility#

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