@airmus/utils
is a utility library that includes multiple commonly used methods.
npm install @airmus/utils
# or
yarn add @airmus/utils
import { scrollToView } from '@airmus/utils'
import { useEffect } from 'react'
const App = () => {
useEffect(() => {
scrollToView({
behavior: 'smooth',
selector: '#footer'
})
}, [])
return (
<div>
<header id='nav'></header>
<section>
Here is a containter
</section>
<footer id='footer'>
</footer>
</div>
)
}
Parse numbers in a string.
/** String integer, String float, Numeric integer, Numeric float */
type IFormat =
| 'STRING_INT'
| 'STRING_FLOAT'
| 'NUMBER_INT'
| 'NUMBER_FLOAT'
type Options<T> = {
/** Number of decimal places */
digits?: number
/** Return value format */
format?: T | IFormat
/** Custom regular expression */
customRegexp?: RegExp
}
/** Extract numbers */
// Format as a string integer and keep two decimal places: '123.00'
numberParse('asdfg123.44*66..', { digits: 2, format: 'STRING_INT' })
// Format as a numeric float: '123.44'
numberParse('asdfg123.44*66..', { format: 'NUMBER_FLOAT' })
numberParse('-2.ppd-123.44*66..', { format: 'NUMBER_INT' })
// -2
/** Multiple matches */
numberMatch('-2.ppd-123.44*66..', { format: 'NUMBER_INT' })
// [-2, -123, 44, 66]
numberMatch('-1.2.ppd-123.44*66..', { format: 'NUMBER_INT' })
// [-1, 2, -123, 44, 66]
numberMatch('-1.2.ppd-123.44*66..', { format: 'STRING_FLOAT' })
// ["-1.2", "-123.44", "66"]
numberMatch('-1.2.ppd-123.44*66..', { format: 'STRING_FLOAT', customRegexp: /[1-5]+/g })
// Custom regular expression matching: ["-1.2", "-123.44", "66"]
Scroll a DOM element into view.
type ScrollToOptions = {
/** Distance from the left side of the viewport */
left?: number
/** Distance from the top of the viewport */
top?: number
/** Scroll type */
behavior: "auto" | "smooth"
}
type Options = ScrollToOptions & {
/** Horizontal scrolling position offset, positive values offset to the right, negative values offset to the left */
offsetX?: number
/** Vertical scrolling position offset, positive values offset upwards, negative values offset downwards */
offsetY?: number
/** CSS selector for scrolling a DOM element */
selector?: string
}
// Scroll the DOM element with id='app' into view and offset it downwards by 100 pixels.
scrollToView({
selector: '#app'
offsetY: 100
})
// Specify absolute position without a selector.
scrollToView({
top: 200,
left: 400
})
// No selector is specified, and no specific location is passed, so the anchor in the route will be used for positioning (if
Control decimal precision (supports customizable rounding)
type Options = {
/** Whether to round */
rounding?: boolean
/** How many decimal places to keep */
digits?: number
}
// Keep 2 decimal places '123.00'
toFixed('123', { digits: 2 })
// '-123.124'
toFixed(-3.124)
// Round up '-123.125'
toFixed(-3.1247, { rounding: true, digits: 3 })
Type checking for data
type IType =
| 'number'
| 'string'
| 'boolean'
| 'undefined'
| 'symbol'
| 'bigint'
| 'array'
| 'function'
| 'regexp'
| 'promise'
| 'date'
| 'dom'
| 'null'
| 'object'
// The first parameter is the target value, followed by optional possible types
isType(value [, type1, ..., typen])
isType('value','string') // true
isType(NaN,'object') // false
// Multiple optional types (any one is satisfied)
isType(/^a(\w+)z$/),'object','string','date') // false
isType(/^a(\w+)z$/),'array','regexp') // true
Get nested data based on the path
type IPath = string | (number | string)[]
deepGet(target: object, path: IPath, defaultValue?: any)
// String path
deepGet({ a: { 'b.c': 's1', b: { c: 's2' } } }, 'a.b.c') // s2
// Array path
deepGet({ a: { 'b.c': 's1', b: { c: 's2' } } }, ['a', 'b.c']) // s1
deepGet({ a: { 'b.c': 's1', b: { c: 's2' } } }, ['a', 'b', 'c']) // s2
// Default value
deepGet([{ a: [{ b: 1 }] }], '0.a.0.b.c', 'error') // error
Convert RGB color value to hexadecimal color value
console.log(RGBToHex('rgb(255, 255, 255)')); // "#FFFFFF"
console.log(RGBToHex('rgba(0, 255, 0, 0.5)')); // "#00FF0080"
Convert hexadecimal color value to RGB color value
console.log(hexToRGB('#FF0000')); // "rgb(255, 0, 0)"
console.log(hexToRGB('#FF000080')); // "rgb(255, 0, 0, 0.5)"