@broxus/js-utils

Broxus JavaScript utilities library

How to install

npm install --save @broxus/js-utils

Contents

• Browser utils
• Device utils
• DOM utils
• Formatters
• Generators
• Validation utils
• Parse
• Support
• Event
• Casts

Browser utils

Provides a set of utility functions that help check the browser environment.

getUserAgent

getUserAgent(): string

Retrieves and returns the UserAgent string. Used only on the client side.

import { getUserAgent } from '@broxus/js-utils'

isBot

isBot(): boolean

Checks UserAgent string for the Search Engine Bot attribute.

import { isBot } from '@broxus/js-utils'

isBrowser

isBrowser(): boolean

Checks if a browser is being used.

import { isBrowser } from '@broxus/js-utils'

isChrome

isChrome(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the Chrome browser.

import { isChrome } from '@broxus/js-utils'

isFirefox

isFirefox(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the Mozilla Firefox browser.

import { isFirefox } from '@broxus/js-utils'

isSafari

isSafari(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the Safari browser.

import { isSafari } from '@broxus/js-utils'

Device utils

Provides a set of utility functions that help check the device environment.

getAndroidVersion

getAndroidVersion(ua: string): string | undefined

Retrieves and returns Android version from the passed UserAgent string. Otherwise, return undefined.

import { getAndroidVersion } from '@broxus/js-utils'

getIosVersion

getIosVersion(ua: string): string | undefined

Retrieves and returns iOS version from the passed UserAgent string. Otherwise, return undefined.

import { getIosVersion } from '@broxus/js-utils'

isAndroid

isAndroid(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the Android device.

import { isAndroid } from '@broxus/js-utils'

isIos

isIos(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the iOS device.

import { isIos } from '@broxus/js-utils'

isMobile

isMobile(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the mobile device (e.g. any smartphone).

import { isMobile } from '@broxus/js-utils'

isTablet

isTablet(ua: string): boolean

Checks if the given UserAgent string is the UserAgent of the tablet device (e.g. any tablet).

import { isTablet } from '@broxus/js-utils'

DOM

Provides a set of utility functions that helps interact with DOM.

canUseDom

canUseDom(): boolean

Checks if DOM is available.

import { canUseDom } from '@broxus/js-utils'

canUseDocElement

canUseDocElement(): boolean

Checks if Document Element is available.

import { canUseDocElement } from '@broxus/js-utils'

addClass

addClass(node: Element, ...args: any[]): void

Adds class name(s) to the given DOM node.

import { addClass } from '@broxus/js-utils'

removeClass

removeClass(node: Element, ...args: any[]): void

Removes class name(s) from the given DOM node.

import { removeClass } from '@broxus/js-utils'

hasClass

hasClass(node: Element, ...args: any[]): boolean

Checks if class name(s) contains in the given DOM node.

import { hasClass } from '@broxus/js-utils'

toggleClass

toggleClass(node: Element, ...args: any[]): void

Toggle class name(s) in the given DOM node.

import { toggleClass } from '@broxus/js-utils'

getScrollWidth

getScrollWidth(): number

Get system scrollbar width.

import { getScrollWidth } from '@broxus/js-utils'

retrieveGlobalAttributes

retrieveGlobalAttributes(props: Record<string, any>): Record<string, string>

Retrieve global attributes (like aria-, data- or role) from the given props hash.

import { retrieveGlobalAttributes } from '@broxus/js-utils'

Formatters

abbrNumber

abbrNumber(value: number | string, decimals: number = 2): string

Round and abbreviation of the given number by digits and truncate floating part by the given decimals. Default decimals is 2.

import { abbrNumber } from '@broxus/js-utils'

abbrNumber(10600) // => 10.6K
abbrNumber(123456789) // => 123.45M
abbrNumber(123456789879, 4) // => 123.4567B

formattedAmount

formattedAmount(value?: string | number, decimals?: number, options?: FormattedAmountOptions): string

Format amount value to display prettified value in a UI.

name	type	optional	default	description
digitsSeparator	string	true		Which symbol should be placed between digits. By default, is space.
precision	number	true	undefined	Precision of the values below than `1e-3` (currency) or `1e-8` (token)
preserve	boolean	true	undefined	Preserve all fractional part
roundingMode	BigNumber.RoundingMode	true	BigNumber.ROUND_DOWN	Rounding mode, integer, 0 to 8.
roundOn	number | boolean	true	true	Round the amount if the value is greater than or equal to the value passed in this option (1e3, 1e6, 1e9 etc.). If enable - the preserve option is ignored. If passed true default round value will be 1e3. Otherwise, if pass false - the amount will not be rounded.
truncate	number	true	undefined	Truncate the fractional part to this value

If integer part greater or equal roundOn value - truncate is 0

If fractional part value less than or equal 1e-2 - truncate is 3

If fractional part value less than or equal 1e-3 - truncate is 4

If fractional part value less than or equal 1e-4 - precision is 4

import { formattedAmount } from '@broxus/js-utils'

formattedAmount(10600) // => 10 600
formattedAmount(123456789) // => 123 456 789

formattedTokenAmount

formattedTokenAmount(value?: string | number, decimals?: number, options?: FormattedAmountOptions): string

Format token amount value to display prettified value in a UI. It's like a formattedAmount, but it has different truncating system;

By default, truncate is 0

If integer part less than 1e3 - truncate is 4

If integer part less than 1 - truncate is 8

If integer part less than or equal 1e-8 - precision is 4

import { formattedTokenAmount } from '@broxus/js-utils'

formattedTokenAmount(10600) // => 10 600
formattedTokenAmount('123456789.853234') // => 123 456 789

sliceString

sliceString(str?: string): string

Returns sliced string (e.g. 0:00...0000)

import { sliceString } from '@broxus/js-utils'

Generators

makeArray

makeArray(length: number, fill?: ArrayFiller): Array

Generate array with the given length and fill with a given value.

import { makeArray } from '@broxus/js-utils'

uniqueKey

uniqueKey(length: number = 7, prefix: string = ''): string

Generate unique key with the given length and prefix.

import { uniqueKey } from '@broxus/js-utils'

Validation

isGoodNumber

isGoodNumber(value: BigNumber | number | string, nonZeroCheck = true): boolean

Checks if the given value is valid number.

You can pass value as BigNumber instance, number or string.

nonZeroCheck - enable check for zero. If true - zero being as invalid value.

import { isGoodNumber } from '@broxus/js-utils'

validateMaxValue

validateMaxValue(maxValue?: string, value?: string): boolean

Checks if the given value less than or equal the given maxValue.

import { validateMaxValue } from '@broxus/js-utils'

validateMinValue

validateMinValue(minValue?: string, value?: string): boolean

Checks if the given value greater than or equal the given minValue.

import { validateMinValue } from '@broxus/js-utils'

Parse

cleanObject

cleanObject(obj: Record<string, any>): Record<string, any>

Clean object - removes all null or empty string keys in object

import { cleanObject } from '@broxus/js-utils'

parseObject

parseObject(value: any): Record<string, string>[] | Record<string, string> | boolean

Attempting to parse the given value into a JS object. Returns false if parsing finished with error.

import { parseObject } from '@broxus/js-utils'

str2json

str2json(string: string, notEvil?: boolean): Record<string, string>[] | Record<string, string> | boolean

Parse JSON-like string to the JS object. Returns false if parsing finished with error.

import { str2json } from '@broxus/js-utils'

stripHtmlTags

stripHtmlTags(html: string): string

Remove all HTML tags in the given value.

import { stripHtmlTags } from '@broxus/js-utils'

Support

animation

animation(): { end: string } | undefined

Checks if animation is supported.

import { animation } from '@broxus/js-utils'

transition

transition(): { end: string } | undefined

Checks if transition is supported.

import { transition } from '@broxus/js-utils'

touch

touch(): boolean

Checks if touch is supported.

import { touch } from '@broxus/js-utils'

isHighDensity

isHighDensity(): boolean

Checks if device is supported high density display.

import { isHighDensity } from '@broxus/js-utils'

isRetina

isRetina(): boolean

Checks if device is supported Retina display.

import { isRetina } from '@broxus/js-utils'

Event

cancelEvent

cancelEvent(event: T): void

Cancel passed event.

import { cancelEvent } from '@broxus/js-utils'

preventEvent

preventEvent(event: T): void

Prevent default behavior in the given event.

import { preventEvent } from '@broxus/js-utils'

stopEventPropagate

stopEventPropagate(event: T): void

Stop propagation of the given event.

import { stopEventPropagate } from '@broxus/js-utils'

triggerEvent

triggerEvent(eventName: string): void

Trigger event by the given name.

import { triggerEvent } from '@broxus/js-utils'

Casts

toBoolean

toBoolean(value: any): boolean

Casts the passed value to a boolean value.

import { toBoolean } from '@broxus/js-utils'

toNull

toNull(value: any): null | any

Casts the passed value to null.

import { toNull } from '@broxus/js-utils'

toNumber

toNumber(value: any): number | undefined

Casts the passed value to number. Otherwise, returns undefined.

import { toNumber } from '@broxus/js-utils'