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:

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

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

Available Third-Party Integrations

Integration	Description	Documentation
Masonry Grid	Dynamic grid layout for responsive designs	Masonry Grid
Typed Text Effect	Typewriter animation for text elements	Typed Text
Marquee Slider	Smooth scrolling content for announcements	Marquee Slider
Range Slider	Interactive dual-handle slider for range selection	Range 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:

// 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.