useStyleClass

Hook that manages CSS class toggling with enter/leave animation sequences on a target element.

basic-demo

Usage#

import { useStyleClass } from '@primereact/headless/styleclass';
 
useStyleClass({
    selector: '@next',
    enterFromClassName: 'hidden',
    enterActiveClassName: 'animate-scalein',
    leaveToClassName: 'hidden',
    leaveActiveClassName: 'animate-fadeout'
});

useStyleClass binds click-to-toggle behavior on the host element, applying CSS class sequences to a target element — see StyleClass for a component-based API.

Features#

Enter/leave CSS class animation sequences with animationend cleanup
Built-in selectors (@next, @prev, @parent, @grandparent) or any CSS selector
Simple toggleClassName for non-animated toggling
Auto-hide on outside click with hideOnOutsideClick
Slidedown animation support with automatic maxHeight calculation
Exposes enter() and leave() methods for programmatic control

Behavior#

Selector#

Set selector to determine the target element. Built-in values resolve relative to the host element.

useStyleClass({ selector: '@next' }); // Next sibling
useStyleClass({ selector: '@prev' }); // Previous sibling
useStyleClass({ selector: '@parent' }); // Parent element
useStyleClass({ selector: '#panel' }); // CSS selector

Enter Animation#

Set enterFromClassName, enterActiveClassName, and optionally enterToClassName to define the enter sequence. Classes are applied in order and cleaned up after animationend.

useStyleClass({
    selector: '@next',
    enterFromClassName: 'hidden',
    enterActiveClassName: 'animate-scalein',
    enterToClassName: 'visible'
});

Leave Animation#

Set leaveFromClassName, leaveActiveClassName, and leaveToClassName to define the leave sequence.

useStyleClass({
    selector: '@next',
    leaveActiveClassName: 'animate-fadeout',
    leaveToClassName: 'hidden'
});

Toggle Class#

Use toggleClassName for simple class toggling without animation sequences.

useStyleClass({ selector: '@next', toggleClassName: 'hidden' });

Hide on Outside Click#

Set hideOnOutsideClick to automatically trigger the leave sequence when clicking outside the host and target elements.

useStyleClass({
    selector: '@next',
    enterFromClassName: 'hidden',
    enterActiveClassName: 'animate-scalein',
    leaveToClassName: 'hidden',
    leaveActiveClassName: 'animate-fadeout',
    hideOnOutsideClick: true
});

Node Ref#

Use nodeRef to bind the click listener to an external element instead of the hook's host element.

const buttonRef = React.useRef(null);
useStyleClass({ nodeRef: buttonRef, selector: '@next', toggleClassName: 'hidden' });

API#

useStyleClass#

Name	Type	Default
`nodeRef`	`RefObject<ReactNode>`	—
A React reference to DOM element that need to specify.
`selector`	`string`	—
Selector to define the target element.
`enterFromClassName`	`string`	—
Style class to add when item begins to get displayed.
`enterActiveClassName`	`string`	—
Style class to add during enter animation.
`enterToClassName`	`string`	—
Style class to add when item begins to get displayed.
`leaveFromClassName`	`string`	—
Style class to add when item begins to get hidden.
`leaveActiveClassName`	`string`	—
Style class to add during leave animation.
`leaveToClassName`	`string`	—
Style class to add when leave animation is completed.
`hiddenClassName`	`string`	—
Style class to apply when the component is hidden.
`hideOnOutsideClick`	`boolean`	`false`
Whether to trigger leave animation when outside of the element is clicked.
`toggleClassName`	`string`	—
Adds or removes a class when no enter-leave animation is required.

Accessibility#

StyleClass does not add ARIA attributes. Add aria-expanded, aria-controls, and other attributes to the trigger and target elements as needed.