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

Package detail

@fiddle-digital/string-responsive

readme