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.