Skip to content

Third-Party Utilities

Overview

The Phenix Third-Party Utilities provide seamless integration with popular JavaScript libraries and components to enhance your web applications. These integrations are loaded on-demand, improving performance by only loading libraries when they're needed.

Initialization

Third-Party Utilities are automatically initialized when you call the main utilities function:

js
// Initialize all utilities including third-party libraries
Phenix(document).utilities();

// Or initialize only library utilities
Phenix(document).utilities({
  type: 'libraries'
});

Available Third-Party Integrations

IntegrationDescriptionDocumentation
Masonry GridDynamic grid layout for responsive designsMasonry Grid
Typed Text EffectTypewriter animation for text elementsTyped Text
Marquee SliderSmooth scrolling content for announcementsMarquee Slider
Range SliderInteractive dual-handle slider for range selectionRange Slider

Key Features

On-Demand Loading

Libraries are only loaded when elements requiring them are detected on the page, reducing initial page load time.

Automatic Configuration

Each integration comes with sensible defaults while allowing customization through data attributes.

Responsive Design

All integrations are designed to work across different screen sizes and adapt to responsive layouts.

RTL Support

Most integrations include support for right-to-left (RTL) languages and layouts.

WordPress Integration

The utility checks if the current environment is a WordPress admin or editor before initializing certain libraries to avoid conflicts:

js
// This check happens internally
if (!document.body.classList.contains('wp-admin') && !document_classes?.includes('-editor')) {
    // Initialize libraries
}

Best Practices

  • Use third-party libraries sparingly to maintain good performance
  • Consider the mobile experience when implementing complex components
  • Test all integrations on different devices and browsers
  • Add appropriate fallback content for users with JavaScript disabled
  • Follow the documentation for each integration for specific best practices

Browser Compatibility

These third-party library integrations are compatible with all modern browsers. The specific compatibility may vary based on the individual libraries being used.

Released under the MIT License.