OddCommon Utils

A set of handy utils.

Setup 📦

To install in a project: npm i @oddcommon/utils

To import in a project: import { randomNumber } from "@oddcommon/utils";

The functions 🛠

• Browser
  • getQueryVar
• Cookies
  • setCookie
  • deleteCookie
  • getCookie
• CSS
  • css
• Data
  • stringToBytes
  • bytesToString
• Device
  • isMobile
  • isIPad
• DOM
  • q
  • qAll
• Mouse
  • getMousePosition
• Numbers
  • randomNumber
  • formatTwoDigits
  • clamp
  • FloatBuffer

Browser 🏄‍♂️

getQueryVar(varName: string)

Return the value of query param from the user's URL.

Cookies 🍪

setCookie(cname: string, cvalue: string, exdays: number)

Sets a cookie.

deleteCookie(cname: string)

Deletes a cookie.

getCookie(cname: string)

Gets the value of a cookie.

CSS 🎨

css(...args: string[])

Converts an array of strings into a single, space-separated string for CSS classes. Designed for use in React when setting className based on state, e.g.:

<div className={css(Styles.myComponent, isActive && Styles.active)} />

Data 🗄️

stringToBytes(string: string)

Converts a string to a Uint8Array. Useful when you need to communicate to Bluetooth (e.g., from a user's phone to a VR headset). ASCII only.

bytesToString(buffer: buffer)

Converts a Uint8Array to a string. Useful when you need to parse communications from Bluetooth (e.g., from a VR headset). ASCII only.

Devices 📱

isMobile()

Check is user agent is from a mobile device (not just a media query for device width).

isIPad()

Checks if user agent is from an iPad (does not return true for other tablets).

DOM 💻

q(selector: string, context: element)

A shorthand for [element].querySelector(); context defaults to document.

qAll(selector: string, context: element)

A shorthand for [element].querySelectorAll(); context defaults to document.

Mouse 🖱️

getMousePosition(e: event, scrollingContainer: element)

Return the mouse position {x, y}. scrollingContainer defaults to document.documentElement.

Numbers 🔢

randomNumber(min: number, max: number)

Returns a random number between the min and max.

formatTwoDigits(index: number)

If index is a single digit, return a string of the number with a "0" affixed to the front of it; else, just return the original number.

clamp(value: number, min: number, max: num)

Clamps a value between two numbers.

FloatBuffer(size: number)

Creates a buffer of floats that can be sampled to expose the following:

• average
• sum
• sumPositive
• sumNegative
• sumAbs
• max
• min
• maxAbs

The size that is passed in on instantiation will be the size of the array of the buffer. When you call update you pass a new value and it will push into the array, dropping old values. This works well when needing to sample data.