@fiddle-digital/string-responsive
v0.0.2
Published
StringResponsive is a comprehensive JavaScript library for responsive design management in web applications. It enables dynamic handling of device-specific media queries and events, allowing developers to programmatically adjust UI and functionality based
Downloads
160
Keywords
Readme
StringResponsive Library
Overview
StringResponsive is a powerful JavaScript library designed to manage responsive design across mobile, tablet, laptop, and desktop devices. It enables developers to dynamically handle media queries and respond to device-specific conditions, enhancing the user experience by adapting the user interface and functionality based on the user's device.
Features
- Dynamic Media Queries: Manage CSS media queries dynamically based on device specifications.
- Event-Driven Responses: Trigger events when a device type matches or mismatches specified criteria.
- Extensive Device Support: Includes built-in configurations for mobile, tablet, laptop, and desktop.
- Customizable Device Settings: Easily adjust settings like screen width ranges for each device type.
Installation
Install StringResponsive using npm:
npm install @fiddle-digital/string-responsive
##Usage Initializing the Library Import and initialize StringResponsive in your project:
import StringResponsive from '@fiddle-digital/string-responsive';
const responsive = StringResponsive.getInstance();
##Configuring Device Queries Set up device-specific queries:
responsive.setQuery({
mobile: { min: 0, max: 359, enable: true },
tablet: { min: 360, max: 1079, enable: true },
laptop: { min: 1080, max: 1365, enable: true },
desktop: { min: 1366, max: undefined, enable: true }
});
##Handling Device-Specific Events Add event listeners for specific device states:
responsive.mobile.addIn(() => {
console.log('Now viewing on mobile device');
});
responsive.desktop.addOut(() => {
console.log('No longer viewing on desktop');
});
Responding to Device Changes
responsive.tablet.on('accept', () => {
console.log('Tablet specific changes accepted');
});