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 a host element and applies CSS class sequences to a target element resolved by selector. See StyleClass for a component-based API.

Features#

Selector-based targeting — built-in @next, @prev, @parent, @grandparent selectors or any CSS selector
Enter/leave sequences — applies {from,active,to} classes in order and cleans them up after animationend
Simple toggle mode — toggleClassName handles the common case of flipping a single class without an animation sequence
Outside-click dismissal — hideOnOutsideClick runs the leave sequence when the user clicks outside the host and target
External host binding — nodeRef moves the click listener onto a different element than the hook's default host
Imperative methods — enter() and leave() trigger the sequences from any event source

Working with callbacks#

Animate a sibling panel#

Combine @next with enter and leave class sequences to animate a panel directly after the trigger.

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

Toggle a single class#

When you do not need the animation lifecycle, use toggleClassName to flip a class on the target.

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

Dismiss on outside click#

Enable hideOnOutsideClick for menus and popovers that should close when the user clicks elsewhere on the page.

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

Attach the listener to a different element#

Pass nodeRef when the trigger lives outside the hook's host tree — for example, a global header button that controls a panel elsewhere in the DOM.

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.