Shared Hooks

JavaScript utility functions for hooks.source.js

Call these functions in your hooks.source.js. No imports needed - they're automatically available.

Animations

Function

Description

globalAnimations()

globalReveal()

Background

Function

Description

globalBackground()

globalBgColor()

globalBgGradient()

globalBgImage()

globalBgImageFetchPriority()

globalBgVideoThumbnail()

Borders

Function

Description

globalBorders()

globalOutline()

Core

Function

Description

addPrefixToTailwindClasses()

advancedClasses()

classnames()

getHoverPrefix()

globalHTMLTag()

injectPrefixOnDarkModeColors()

Effects

Function

Description

bgPosition()

globalEffects()

globalFilters()

globalOverlay()

globalOverlayColor()

globalOverlayGradient()

globalOverlayImage()

Interactive

Function

Description

globalFilter()

globalLink()

Layout

Function

Description

getHiddenClasses()

globalActAsGridOrFlexItem()

globalLayout()

Function

Description

globalMenuItem()

globalNavItems()

globalNavTitle()

Sizing

Function

Description

aspectRatioClasses()

globalSizing()

globalSizingContainer()

objectClasses()

Spacing

Function

Description

globalSpacing()

globalSpacingMargin()

globalSpacingPadding()

Transforms

Function

Description

globalTransforms()

Transitions

Function

Description

aControlWantsHover()

getAlpineTransitionAttributesDesktop()

getAlpineTransitionAttributesMobile()

globalTransitions()

Typography

Function

Description

globalButtonFontAndTextStyles()

globalHeadingColor()

globalHeadingTextColor()

globalInputFontAndTextStyles()

globalTextFontsAndTextStyles()

Quick Usage

PreviousTransitionNames

Last updated 7 months ago

Was this helpful?

function transformHook(rw) {
    const classes = classnames()
        .add(globalSpacing(rw))
        .add(globalBackground(rw))
        .toString();

    return { classes };
}

exports.transformHook = transformHook;