@fiddle-digital/string-responsive

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');
});