A package that allows you to import frequently used utilities for web development in one place. Primarily, it includes utilities that I often use. If you have any requests for the contents or types of utilities, please open an issue.
import { foo } from 'umaki'A function that stops scrolling.
import { bgScrollStop } from 'umaki'
bgScrollStop() // scroll stop
bgScrollStop(false) // scroll startA function that prevents the default event behavior.
import { pd } from 'umaki'
document.getElementById('myElement').addEventListener('click', pd)A function that scrolls to a specific hash position.
import { scrollToHash } from 'umaki'
;(async () => {
await scrollToHash('#target')
console.log('Scrolled!')
// smooth scroll
await scrollToHash('#target', true)
// smooth scroll + offset
await scrollToHash('#target', true, 100)
})()A function that controls the playback of a video element.
import { videoPlayControl } from 'umaki'
const videoElement = document.getElementById('myVideo')
videoPlayControl(videoElement, true) // play
videoPlayControl(videoElement, false) // pauseA function that converts a date string to a specific format.
import { changeDateStringToSpecificFormat } from 'umaki'
const date = '2023-10-05'
const formattedDate = changeDateStringToSpecificFormat(date, 'MM/DD/YYYY')
console.log(formattedDate) // '10/05/2023'A function that converts a JSON string to a JSON object.
import { jsonStringToJsonObject } from 'umaki'
const jsonString = '{"name": "John", "age": 30}'
const jsonObject = jsonStringToJsonObject(jsonString)
console.log(jsonObject) // { name: 'John', age: 30 }A function that limits the number of times a function is called to at most one time over a specified time period.
import { debounce } from 'umaki'
const debouncedFunction = debounce(() => {
console.log('Debounced!')
}, 300)
window.addEventListener('resize', debouncedFunction)A function that limits the number of times a function is called to a maximum of once in a specified period.
import { throttle } from 'umaki'
const throttledFunction = throttle(() => {
console.log('Throttled!')
}, 300)
window.addEventListener('scroll', throttledFunction)A function that returns the aspect ratio of the specified width and height.
import { getAspectRatio } from 'umaki'
const aspectRatio = getAspectRatio(1920, 1080)
console.log(aspectRatio) // { w: 16, h: 9 }A function that retrieves the class names of the specified HTML element as an array.
import { getClassNames } from 'umaki'
const element = document.createElement('div')
element.className = 'class1 class2 class3'
const classNames = getClassNames(element)
console.log(classNames) // ['class1', 'class2', 'class3']A function that retrieves the height of the document.
import { getDocumentHeight } from 'umaki'
const height = getDocumentHeight()
console.log(height)A function that retrieves the event paths.
import { getEventPaths } from 'umaki'
document.addEventListener('click', (event) => {
const paths = getEventPaths(event)
console.log(paths)
})A function that calculates the greatest common divisor of two numbers.
import { getGcd } from 'umaki'
const gcd = getGcd(48, 18)
console.log(gcd) // 6A function that retrieves the current orientation of the device.
import { getOrientation } from 'umaki'
const orientation = getOrientation()
console.log(orientation) // 'landscape' or 'portrait'A function that recursively retrieves the parent elements of the specified HTML element.
import { getParentList } from 'umaki'
const element = document.createElement('div')
const parentList = getParentList(element)
console.log(parentList)A function that retrieves the query parameters from the URL. This is a wrapper around query-string, so you can specify options in the second argument.
import { getQueryParams } from 'umaki'
const params = getQueryParams('test') // https://example.com?test=123
console.log(params) // 123
// Example of specifying options
const params = getQueryParams('test', { parseNumbers: false })
console.log(params) // '123'A function that converts a pixel value to rem units.
import { getRem } from 'umaki'
const remValue = getRem(16)
console.log(remValue) // '1rem'A function that retrieves the width of the scrollbar.
import { getScrollbarWidth } from 'umaki'
const scrollbarWidth = getScrollbarWidth()
console.log(scrollbarWidth) // 15A function that retrieves a value from session storage.
import { getSessionStorage } from 'umaki'
const value = getSessionStorage('testKey')
console.log(value) // 'testValue'A function that retrieves the length of a string (considering Unicode characters).
import { getStringLength } from 'umaki'
const length = getStringLength('こんにちは')
console.log(length) // 5A function that retrieves the value of the specified CSS custom property.
import { getStylePropertyValue } from 'umaki'
const value = getStylePropertyValue('--custom-property')
console.log(value)A function that retrieves the value of the specified CSS custom property as a number.
import { getStylePropertyValueToNumber } from 'umaki'
const value = getStylePropertyValueToNumber('--custom-property')
console.log(value)A function that retrieves user agent information.
import { getUaData } from 'umaki'
const uaData = getUaData()
console.log(uaData)
// {
// browserName: 'chrome',
// browserVersion: '91.0.4472.124',
// browserEngine: 'blink',
// osName: 'windows',
// type: 'desktop',
// touchSupport: false
// }A function that checks if the current date is between two specified dates.
import { isBetweenDateTime } from 'umaki'
const dateA = '2023-10-01'
const dateB = '2023-10-10'
const result = isBetweenDateTime(dateA, dateB)
console.log(result) // true or falseA function that checks if all elements exist.
import { isExistAllElements } from 'umaki'
const elements = [document.createElement('div'), document.createElement('span')]
const result = isExistAllElements(elements)
console.log(result) // true or falseA function that checks if the device is an iPad.
import { isIpad } from 'umaki'
const result = isIpad()
console.log(result) // true or falseA function that checks if a specific key exists in an object.
import { isKeyExists } from 'umaki'
const obj = { a: 1, b: 2 }
const result = isKeyExists(obj, 'a')
console.log(result) // true or falseA function that checks if the browser is Safari.
import { isSafari } from 'umaki'
const result = isSafari()
console.log(result) // true or falseA function that checks if an element is scrollable.
import { isScrollable } from 'umaki'
const element = document.createElement('div')
element.style.overflow = 'auto'
element.innerHTML = '<div style="height: 200px;"></div>'
const result = isScrollable(element)
console.log(result) // true or falseA function that checks if the device supports touch.
import { isTouchSupport } from 'umaki'
const result = isTouchSupport()
console.log(result) // true or falseA function that removes all HTML tags from a string.
import { removeAllHtmlTags } from 'umaki'
const input = '<p>Hello <strong>World</strong>!</p>'
const output = removeAllHtmlTags(input)
console.log(output) // 'Hello World!'A function that removes an attribute from the specified HTML element.
import { removeAttribute } from 'umaki'
const element = document.createElement('div')
element.setAttribute('data-test', 'value')
removeAttribute(element, 'data-test')
console.log(element.hasAttribute('data-test')) // falseA function that removes an item with the specified key from session storage.
import { removeSessionStorage } from 'umaki'
const key = 'testKey'
removeSessionStorage(key)
console.log(sessionStorage.getItem(key)) // nullA function that removes the specified CSS custom property.
import { removeStylePropertyValue } from 'umaki'
const key = '--custom-property'
removeStylePropertyValue(key)
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) // ''A function that sets a CSS variable to 100vh to address viewport unit issues on mobile devices.
import { set100vh } from 'umaki'
set100vh()A function that sets a CSS variable to 100vw minus the scrollbar width.
import { set100vw } from 'umaki'
set100vw()A function that sets an attribute on the specified HTML element.
import { setAttribute } from 'umaki'
const element = document.createElement('div')
setAttribute(element, 'data-test', 'value')
console.log(element.getAttribute('data-test')) // 'value'A function that adjusts the horizontal scroll position of the root element to center the target element.
import { setScrollPositionToCenter } from 'umaki'
const rootElement = document.getElementById('root')
const targetElement = document.getElementById('target')
setScrollPositionToCenter(rootElement, targetElement)A function that sets a value in session storage.
import { setSessionStorage } from 'umaki'
const key = 'testKey'
const value = 'testValue'
setSessionStorage(key, value)
console.log(sessionStorage.getItem(key)) // 'testValue'A function that sets a CSS custom property on the root element.
import { setStylePropertyValue } from 'umaki'
const key = '--custom-color'
const value = 'blue'
setStylePropertyValue(key, value)
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) // 'blue'A function that converts a string to a boolean value.
import { toBoolean } from 'umaki'
console.log(toBoolean('true')) // true
console.log(toBoolean('false')) // false
console.log(toBoolean('random')) // falseA function that converts a number to a positive number. Returns the absolute value if the number is negative.
import { toPositiveNumber } from 'umaki'
console.log(toPositiveNumber(5)) // 5
console.log(toPositiveNumber(-5)) // 5
console.log(toPositiveNumber(0)) // 0
console.log(toPositiveNumber(-3.14)) // 3.14
console.log(toPositiveNumber(3.14)) // 3.14A function that wraps each character of the text content of an HTML element with individual <span> elements.
import { wrapTextWithSpans } from 'umaki'
const element = document.createElement('div')
element.textContent = 'hello'
wrapTextWithSpans(element)
console.log(element.innerHTML) // '<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>'A function that pauses execution for a specified amount of time.
import { sleep } from 'umaki'
;(async () => {
console.log('Start')
await sleep(1) // 1ms wait
console.log('End')
})()A function that waits until all images and videos in the document are fully loaded.
import { waitForAllMediaLoaded } from 'umaki'
;(async () => {
const allMediaLoaded = await waitForAllMediaLoaded()
console.log(allMediaLoaded) // true or false
// first view only
const firstViewMediaLoaded = await waitForAllMediaLoaded(true)
console.log(firstViewMediaLoaded) // true or false
})()Specific usage for frameworks or various tools is described below.
When using with Astro for SSR, add umaki to vite.ssr.noExternal.
// astro.config.ts
export default defineConfig(({ mode }) => {
return {
vite: {
ssr: {
noExternal: ['umaki']
}
}
}
})