@fiddle-digital/string-responsive/readme.md

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

![Alpha](https://img.shields.io/badge/Status-Alpha-red)
  
# 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:

```sh
npm install @fiddle-digital/string-responsive
```

##Usage
**Initializing the Library**
Import and initialize StringResponsive in your project:

```javascript
import StringResponsive from '@fiddle-digital/string-responsive';
```
```javascript
const responsive = StringResponsive.getInstance();
```

##Configuring Device Queries
**Set up device-specific queries:**

```javascript
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:**

```javascript
responsive.mobile.addIn(() => {
    console.log('Now viewing on mobile device');
});

responsive.desktop.addOut(() => {
    console.log('No longer viewing on desktop');
});
```

**Responding to Device Changes**
```javascript
responsive.tablet.on('accept', () => {
    console.log('Tablet specific changes accepted');
});
```