StyleClass

StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.

Toggle Class

Animations

Import via Module


import { StyleClass } from 'primereact/styleclass';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/styleclass/styleclass.min.js"></script>

Getting Started

Required prop nodeRef needs to be bind to target's ref which is DOM element. StyleClass has two modes, toggleClassName to simply add-remove a class and enter/leave animations.

ToggleClass


<StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled">
    <Button ref={toggleBtnRef} label="Toggle p-disabled" />
</StyleClass>
<InputText className="block mt-3" />

Enter/Leave Animation


<StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="my-fadein">
    <Button ref={openBtnRef} label="Show" className="mr-2" />
</StyleClass>

<StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="my-fadeout" leaveToClassName="hidden">
    <Button ref={closeBtnRef} label="Hide" />
</StyleClass>

<div className="box hidden">Content</div>

Target

Target element is defined with the selector prop that can either be a valid css query or one of the keywords below.

Name	Description
@next	Next element.
@prev	Previous element.
@parent	Parent element.
@grandparent	Parent element of the parent.

Properties

Name	Type	Default	Description
selector	string	null	Selector to define the target element.
nodeRef	any	null	A React reference to DOM element that need to specify. Required
enterClassName	string	null	Style class to add when item begins to get displayed.
enterActiveClassName	string	null	Style class to add during enter animation.
enterToClassName	string	null	Style class to add when enter animation is completed.
leaveClassName	string	null	Style class to add when item begins to get hidden.
leaveActiveClassName	string	null	Style class to add during leave animation
leaveToClassName	string	null	Style class to add when leave animation is completed.
hideOnOutsideClick	boolean	false	Whether to trigger leave animation when outside of the element is clicked.
toggleClassName	string	null	Adds or removes a class when no enter-leave animation is required.