https://github.com/interactive-pioneers/iptools-utils

Common utility bundle
https://github.com/interactive-pioneers/iptools-utils

Last synced: about 1 month ago
JSON representation

Common utility bundle

• Host: GitHub
• URL: https://github.com/interactive-pioneers/iptools-utils
• Owner: interactive-pioneers
• License: gpl-3.0
• Created: 2016-03-08T13:53:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-28T16:28:49.000Z (12 months ago)
• Last Synced: 2024-09-30T13:41:16.358Z (about 2 months ago)
• Language: JavaScript
• Size: 1.19 MB
• Stars: 1
• Watchers: 5
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# iptools-utils

IPTools Utilities bundle for media query detection and event namespacing

## Media query detection

### 1. `@use` SCSS package with your project-specific media queries

```scss

@use 'iptools-utils' with ($media-queries: $my-media-queries);

```

***Note:*** `$my-media-queries` MUST be an SCSS map with key-value pairs, where the key is the name of the media query and the value is the actual media query, i.e. what you would write after `@media` in CSS.

Alternatively, you can use the default media queries like this:

```scss

@use 'iptools-utils';

```

or by using the supplied `iptools-utils.default.css`.

### 2. import media query detection

```javascript

import { media } from 'iptools-utils';

```

### 3. Use media query detection

* `media.isMediaQuery('tablet');` true/false

* `media.getMediaQueries();`

  ```json

    {

      "phone": false,

      "tablet": true,

      "desktop": false

    }

    ```

  

## Event namespacing

### 1. import event namespacing

```javascript

import { getNamespacedEvents } from 'iptools-utils';

```

### 2. Use namespacing function

```javascript

getNamespacedEvents('eventName', 'myNamespace');

getNamespacedEvents(['eventName1', 'eventName2', 'eventName3'], 'myNamespace');

```