![\"NPM](\"https://img.shields.io/npm/v/umaki\")
\n ![\"NPM](\"https://img.shields.io/npm/types/umaki\")
\n ![\"NPM](\"https://img.shields.io/npm/dy/umaki\")
\n\n
\n ![\"umaki](\"docs/character-2.png\")
\n
\n Umaki-chan - Official Character\n
Hello World!
\";\nconst output = tap(removeAllHtmlTags(input), (result) => {\n console.log(\"Sanitized:\", result);\n});\n// Logs: 'Sanitized: Hello World!'\n// output = 'Hello World!'\n\n// Caching example\nconst data = tap(processData(raw), (result) => {\n cache.set(\"processed\", result);\n});\n\n// Works with higher-order functions\nconst debouncedFn = tap(debounce(handler, 100), () => {\n console.log(\"Debounced function created\");\n});\n```\n\n[View file β](src/libs/callback/tap.ts)\n\n### tapAsync (Promise)\n\nA function that awaits a Promise, executes a callback with the resolved value, and returns the original value. Useful for performing side effects on async values without modifying them.\n\n```ts\nimport { tapAsync } from \"umaki\";\n\n// Logging async results\nconst data = await tapAsync(fetchData(), (result) => {\n console.log(\"Fetched:\", result);\n});\n\n// Caching async results\nconst getData = () =>\n tapAsync(fetchFromServer(), (data) => cache.set(\"data\", data));\n\n// Parallel execution with individual completion tracking\nawait Promise.all([\n tapAsync(fetchUserData(), (user) => console.log(\"user loaded\")),\n tapAsync(fetchProductData(), (products) => console.log(\"products loaded\")),\n tapAsync(fetchOrderData(), (orders) => console.log(\"orders loaded\")),\n]);\n\n// Event emission on async completion\nconst loadUser = () =>\n tapAsync(fetchUser(), (user) => eventEmitter.emit(\"userLoaded\", user));\n```\n\n[View file β](src/libs/callback/tap-async.ts)\n\n## Control\n\n### bgScrollStop\n\nA function that stops scrolling.\n\n```ts\nimport { bgScrollStop } from \"umaki\";\n\nbgScrollStop(); // scroll stop\nbgScrollStop(false); // scroll start\n```\n\n[View file β](src/libs/control/bg-scroll-stop.ts)\n\n### copyToClipboard (Promise)\n\nA function that copies text to the clipboard using the modern Clipboard API.\n\n```ts\nimport { copyToClipboard } from \"umaki\";\n\n// Basic usage\nconst success = await copyToClipboard(\"Hello, World!\");\nif (success) {\n console.log(\"Copied to clipboard!\");\n} else {\n console.log(\"Failed to copy\");\n}\n\n// Use in click handler\nbutton.addEventListener(\"click\", async () => {\n const copied = await copyToClipboard(textToCopy);\n showToast(copied ? \"Copied!\" : \"Copy failed\");\n});\n```\n\n[View file β](src/libs/control/copy-to-clipboard.ts)\n\n### pd\n\nA function that prevents the default event behavior.\n\n```ts\nimport { pd } from \"umaki\";\n\ndocument.getElementById(\"myElement\").addEventListener(\"click\", pd);\n```\n\n[View file β](src/libs/control/pd.ts)\n\n### scrollToHash (Promise)\n\nA function that scrolls to a specific hash position.\n\n```ts\nimport { scrollToHash } from \"umaki\";\n(async () => {\n await scrollToHash(\"#target\");\n console.log(\"Scrolled!\");\n\n // smooth scroll\n await scrollToHash(\"#target\", true);\n\n // smooth scroll + offset\n await scrollToHash(\"#target\", true, 100);\n})();\n```\n\n[View file β](src/libs/control/scroll-to-hash.ts)\n\n### videoPlayControl\n\nA function that controls the playback of a video element.\n\n```ts\nimport { videoPlayControl } from \"umaki\";\n\nconst videoElement = document.getElementById(\"myVideo\");\nvideoPlayControl(videoElement, true); // play\nvideoPlayControl(videoElement, false); // pause\n\n// set currentTime\nvideoPlayControl(videoElement, true, 10); // play and set currentTime to 10\n```\n\n[View file β](src/libs/control/video-play-control.ts)\n\n## Convert\n\n### changeDateStringToSpecificFormat\n\nA function that converts a date string to a specific format.\n\n```ts\nimport { changeDateStringToSpecificFormat } from \"umaki\";\n\n// Basic usage\nconst date = \"2023-10-05\";\nconst formattedDate = changeDateStringToSpecificFormat(date, \"MM/DD/YYYY\");\nconsole.log(formattedDate); // '10/05/2023'\n\n// With timezone\nconst dateWithTz = \"2025-04-25T00:00:00.000Z\";\nconst formattedDateWithTz = changeDateStringToSpecificFormat(\n dateWithTz,\n \"YYYY-MM-DD HH:mm:ss\",\n \"Asia/Tokyo\"\n);\nconsole.log(formattedDateWithTz); // '2025-04-25 09:00:00'\n\n// With different timezone\nconst formattedDateWithDifferentTz = changeDateStringToSpecificFormat(\n dateWithTz,\n \"YYYY-MM-DD HH:mm:ss\",\n \"America/New_York\"\n);\nconsole.log(formattedDateWithDifferentTz); // '2025-04-24 20:00:00'\n```\n\nNote: This function focuses on timezone handling rather than locale-specific formatting. When a timezone is specified, the date will be converted to that timezone before formatting.\n\n[View file β](src/libs/convert/change-date-string-to-specific-format.ts)\n\n### hexToRgb\n\nA function that converts a hex color string to an RGB color object. Supports `#RGB` / `#RRGGBB` and the same forms without the leading `#`. Returns `undefined` for invalid input.\n\n```ts\nimport { hexToRgb } from \"umaki\";\n\nhexToRgb(\"#ff0000\"); // { r: 255, g: 0, b: 0 }\nhexToRgb(\"#fff\"); // { r: 255, g: 255, b: 255 }\nhexToRgb(\"abc\"); // { r: 170, g: 187, b: 204 }\nhexToRgb(\"#invalid\"); // undefined\n```\n\n[View file β](src/libs/convert/hex-to-rgb.ts)\n\n### jsonStringToJsonObject\n\nA function that converts a JSON string to a JSON object.\n\n```ts\nimport { jsonStringToJsonObject } from \"umaki\";\n\nconst jsonString = '{\"name\": \"John\", \"age\": 30}';\nconst jsonObject = jsonStringToJsonObject(jsonString);\nconsole.log(jsonObject); // { name: 'John', age: 30 }\n```\n\n[View file β](src/libs/convert/json-string-to-json-object.ts)\n\n### rgbToHex\n\nA function that converts RGB color components to a 6-digit hex color string with leading `#`. Each component is rounded to the nearest integer and clamped to `[0, 255]`. Non-finite values (`NaN`, `Infinity`, `-Infinity`) are treated as `0`.\n\n```ts\nimport { rgbToHex } from \"umaki\";\n\nrgbToHex(255, 0, 0); // '#ff0000'\nrgbToHex(170, 187, 204); // '#aabbcc'\nrgbToHex(1, 2, 3); // '#010203'\nrgbToHex(300, -10, 128.5); // '#ff0081' (clamped & rounded)\nrgbToHex(NaN, NaN, NaN); // '#000000'\n```\n\n[View file β](src/libs/convert/rgb-to-hex.ts)\n\n## EventControl\n\n### debounce\n\nA function that limits the number of times a function is called to at most one time over a specified time period.\n\n```ts\nimport { debounce } from \"umaki\";\n\nconst debouncedFunction = debounce(() => {\n console.log(\"Debounced!\");\n}, 300);\n\nwindow.addEventListener(\"resize\", debouncedFunction);\n```\n\n[View file β](src/libs/eventControl/debounce.ts)\n\n### throttle\n\nA function that limits the number of times a function is called to a maximum of once in a specified period.\n\n```ts\nimport { throttle } from \"umaki\";\n\nconst throttledFunction = throttle(() => {\n console.log(\"Throttled!\");\n}, 300);\n\nwindow.addEventListener(\"scroll\", throttledFunction);\n```\n\n[View file β](src/libs/eventControl/throttle.ts)\n\n## Get\n\n### getAspectRatio\n\nA function that returns the aspect ratio of the specified width and height.\n\n```ts\nimport { getAspectRatio } from \"umaki\";\n\nconst aspectRatio = getAspectRatio(1920, 1080);\nconsole.log(aspectRatio); // { w: 16, h: 9 }\n```\n\n[View file β](src/libs/get/get-aspect-ratio.ts)\n\n### getClassNames\n\nA function that retrieves the class names of the specified HTML element as an array.\n\n```ts\nimport { getClassNames } from \"umaki\";\n\nconst element = document.createElement(\"div\");\nelement.className = \"class1 class2 class3\";\nconst classNames = getClassNames(element);\nconsole.log(classNames); // ['class1', 'class2', 'class3']\n```\n\n[View file β](src/libs/get/get-class-names.ts)\n\n### getDocumentHeight\n\nA function that retrieves the height of the document.\n\n```ts\nimport { getDocumentHeight } from \"umaki\";\n\nconst height = getDocumentHeight();\nconsole.log(height);\n```\n\n[View file β](src/libs/get/get-document-height.ts)\n\n### getEventPaths\n\nA function that retrieves the event paths.\n\n```ts\nimport { getEventPaths } from \"umaki\";\n\ndocument.addEventListener(\"click\", (event) => {\n const paths = getEventPaths(event);\n console.log(paths);\n});\n```\n\n[View file β](src/libs/get/get-event-paths.ts)\n\n### getGcd\n\nA function that calculates the greatest common divisor of two numbers.\n\n```ts\nimport { getGcd } from \"umaki\";\n\nconst gcd = getGcd(48, 18);\nconsole.log(gcd); // 6\n```\n\n[View file β](src/libs/get/get-gcd.ts)\n\n### getGravatarUrl\n\nA function that generates a Gravatar avatar image URL from an email address and size parameter.\n\n```ts\nimport { getGravatarUrl } from \"umaki\";\n\nconst avatarUrl = getGravatarUrl('user@example.com', 80);\nconsole.log(avatarUrl);\n// 'https://www.gravatar.com/avatar/b58996c504c5638798eb6b511e6f49af?s=80&d=404'\n\n// Different size\nconst largeAvatar = getGravatarUrl('user@example.com', 200);\n\n// Email with uppercase and whitespace (automatically normalized)\nconst normalizedAvatar = getGravatarUrl(' USER@EXAMPLE.COM ', 80);\n// Same result as above due to normalization\n```\n\n[View file β](src/libs/get/get-gravatar-url.ts)\n\n### getOrientation\n\nA function that retrieves the current orientation of the device.\n\n```ts\nimport { getOrientation } from \"umaki\";\n\nconst orientation = getOrientation();\nconsole.log(orientation); // 'landscape' or 'portrait'\n```\n\n[View file β](src/libs/get/get-orientation.ts)\n\n### getParentList\n\nA function that recursively retrieves the parent elements of the specified HTML element.\n\n```ts\nimport { getParentList } from \"umaki\";\n\nconst element = document.createElement(\"div\");\nconst parentList = getParentList(element);\nconsole.log(parentList);\n```\n\n[View file β](src/libs/get/get-parent-list.ts)\n\n### getQueryParams\n\nA function that retrieves the value of a specified query parameter from the URL.\n\n```ts\nimport { getQueryParams } from \"umaki\";\n\n// Basic usage\nconst param = getQueryParams(\"id\"); // returns value from window.location.search\n\n// With custom search string\nconst customParam = getQueryParams(\"id\", { searchString: \"?id=123\" });\n\n// With parse options\nconst paramWithOptions = getQueryParams(\"id\", {\n parseOptions: { arrayFormat: \"bracket\" },\n});\n\n// With both custom search string and parse options\nconst customParamWithOptions = getQueryParams(\"id\", {\n searchString: \"?id=123\",\n parseOptions: { arrayFormat: \"bracket\" },\n});\n```\n\n[View file β](src/libs/get/get-query-params.ts)\n\n### getRandomInt\n\nA function that returns a random integer between min (inclusive) and max (inclusive).\n\n```ts\nimport { getRandomInt } from \"umaki\";\n\n// Basic usage\nconst random = getRandomInt(1, 10);\nconsole.log(random); // Random integer from 1 to 10\n\n// Use for array index\nconst items = [\"apple\", \"banana\", \"orange\"];\nconst randomItem = items[getRandomInt(0, items.length - 1)];\n\n// Generate random delay\nconst delay = getRandomInt(100, 500);\nawait sleep(delay / 1000);\n```\n\n[View file β](src/libs/get/get-random-int.ts)\n\n### getRelativeTime\n\nA function that returns a human-readable relative time string (e.g., \"3 minutes ago\", \"2 days ago\") using the Intl.RelativeTimeFormat API.\n\n```ts\nimport { getRelativeTime } from \"umaki\";\n\n// Basic usage (Japanese locale by default)\nconst pastDate = new Date(Date.now() - 5 * 60 * 1000);\nconsole.log(getRelativeTime(pastDate)); // \"5 εε\"\n\n// English locale\nconsole.log(getRelativeTime(pastDate, \"en\")); // \"5 minutes ago\"\n\n// Future dates\nconst futureDate = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);\nconsole.log(getRelativeTime(futureDate)); // \"2 ζ₯εΎ\"\n\n// With timestamp or ISO string\nconsole.log(getRelativeTime(1702800000000, \"en\")); // relative to now\nconsole.log(getRelativeTime(\"2024-01-15T12:00:00Z\", \"en\"));\n```\n\n[View file β](src/libs/get/get-relative-time.ts)\n\n### getRem\n\nA function that converts a pixel value to rem units.\n\n```ts\nimport { getRem } from \"umaki\";\n\nconst remValue = getRem(16);\nconsole.log(remValue); // '1rem'\n```\n\n[View file β](src/libs/get/get-rem.ts)\n\n### getRenderedLineHeight\n\nMeasures the line-height **as it is actually rendered** (in CSS pixels) for a target element by inserting a hidden probe element with the same font-related styles and dividing its multi-line height by the sample line count.\n\nThis works around an iOS Safari quirk ([WebKit Bug #225695](https://bugs.webkit.org/show_bug.cgi?id=225695)) where fractional `line-height` values are floored to integer pixels at paint time. Stacking-line UIs that rely on `1lh` (e.g. `mask-image: repeating-linear-gradient` rules) drift on iOS Safari but match `getRenderedLineHeight` output. Returns `NaN` in SSR environments or when the probe cannot be measured.\n\nThe caller is responsible for awaiting `document.fonts.ready` before measuring when font-loaded accuracy matters.\n\n```ts\nimport { getRenderedLineHeight } from \"umaki\";\n\nconst textEl = document.querySelectorHello World!
\";\nconst output = removeAllHtmlTags(input);\nconsole.log(output); // 'Hello World!'\n```\n\n[View file β](src/libs/remove/remove-all-html-tags.ts)\n\n### removeAttribute\n\nA function that removes an attribute from the specified HTML element.\n\n```ts\nimport { removeAttribute } from \"umaki\";\n\nconst element = document.createElement(\"div\");\nelement.setAttribute(\"data-test\", \"value\");\nremoveAttribute(element, \"data-test\");\nconsole.log(element.hasAttribute(\"data-test\")); // false\n```\n\n[View file β](src/libs/remove/remove-attribute.ts)\n\n### removeSessionStorage\n\nA function that removes an item with the specified key from session storage.\n\n```ts\nimport { removeSessionStorage } from \"umaki\";\n\nconst key = \"testKey\";\nremoveSessionStorage(key);\nconsole.log(sessionStorage.getItem(key)); // null\n```\n\n[View file β](src/libs/remove/remove-session-storage.ts)\n\n### removeStylePropertyValue\n\nA function that removes the specified CSS custom property.\n\n```ts\nimport { removeStylePropertyValue } from \"umaki\";\n\nconst key = \"--custom-property\";\nremoveStylePropertyValue(key);\nconsole.log(getComputedStyle(document.documentElement).getPropertyValue(key)); // ''\n```\n\n[View file β](src/libs/remove/remove-style-property-value.ts)\n\n## Set\n\n### set100vh\n\nA function that sets a CSS variable to 100vh to address viewport unit issues on mobile devices.\n\n```ts\nimport { set100vh } from \"umaki\";\n\nset100vh();\n```\n\n[View file β](src/libs/set/set-100vh.ts)\n\n### set100vw\n\nA function that sets a CSS variable to 100vw minus the scrollbar width.\n\n```ts\nimport { set100vw } from \"umaki\";\n\nset100vw();\n```\n\n[View file β](src/libs/set/set-100vw.ts)\n\n### setAttribute\n\nA function that sets an attribute on the specified HTML element.\n\n```ts\nimport { setAttribute } from \"umaki\";\n\nconst element = document.createElement(\"div\");\nsetAttribute(element, \"data-test\", \"value\");\nconsole.log(element.getAttribute(\"data-test\")); // 'value'\n```\n\n[View file β](src/libs/set/set-attribute.ts)\n\n### setScrollPositionToCenter\n\nA function that adjusts the horizontal scroll position of the root element to center the target element.\n\n```ts\nimport { setScrollPositionToCenter } from \"umaki\";\n\nconst rootElement = document.getElementById(\"root\");\nconst targetElement = document.getElementById(\"target\");\nsetScrollPositionToCenter(rootElement, targetElement);\n```\n\n[View file β](src/libs/set/set-scroll-position-to-center.ts)\n\n### setSessionStorage\n\nA function that sets a value in session storage.\n\n```ts\nimport { setSessionStorage } from \"umaki\";\n\nconst key = \"testKey\";\nconst value = \"testValue\";\nsetSessionStorage(key, value);\nconsole.log(sessionStorage.getItem(key)); // 'testValue'\n```\n\n[View file β](src/libs/set/set-session-storage.ts)\n\n### setStylePropertyValue\n\nA function that sets a CSS custom property on the root element.\n\n```ts\nimport { setStylePropertyValue } from \"umaki\";\n\nconst key = \"--custom-color\";\nconst value = \"blue\";\nsetStylePropertyValue(key, value);\nconsole.log(getComputedStyle(document.documentElement).getPropertyValue(key)); // 'blue'\n```\n\n[View file β](src/libs/set/set-style-property-value.ts)\n\n## To\n\n### toBoolean\n\nA function that converts a string to a boolean value.\n\n```ts\nimport { toBoolean } from \"umaki\";\n\nconsole.log(toBoolean(\"true\")); // true\nconsole.log(toBoolean(\"false\")); // false\nconsole.log(toBoolean(\"random\")); // false\n```\n\n[View file β](src/libs/to/to-boolean.ts)\n\n### toPositiveNumber\n\nA function that converts a number to a positive number. Returns the absolute value if the number is negative.\n\n```ts\nimport { toPositiveNumber } from \"umaki\";\n\nconsole.log(toPositiveNumber(5)); // 5\nconsole.log(toPositiveNumber(-5)); // 5\nconsole.log(toPositiveNumber(0)); // 0\nconsole.log(toPositiveNumber(-3.14)); // 3.14\nconsole.log(toPositiveNumber(3.14)); // 3.14\n```\n\n[View file β](src/libs/to/to-positive-number.ts)\n\n## Transform\n\n### wrapTextWithSpans\n\nA function that wraps each character of the text content of an HTML element with individual `` elements.\n\n```ts\nimport { wrapTextWithSpans } from \"umaki\";\n\nconst element = document.createElement(\"div\");\nelement.textContent = \"hello\";\nwrapTextWithSpans(element);\nconsole.log(element.innerHTML); // 'hello'\n```\n\n[View file β](src/libs/transform/wrap-text-with-spans.ts)\n\n## Wait\n\n### sleep (Promise)\n\nA function that pauses execution for a specified amount of time.\n\n```ts\nimport { sleep } from \"umaki\";\n(async () => {\n console.log(\"Start\");\n await sleep(1); // 1s wait\n console.log(\"End\");\n})();\n```\n\n[View file β](src/libs/wait/sleep.ts)\n\n### waitForAllMediaLoaded (Promise)\n\nA function that waits until all images and videos in the document are fully loaded.\n\n```ts\nimport { waitForAllMediaLoaded } from \"umaki\";\n(async () => {\n const allMediaLoaded = await waitForAllMediaLoaded();\n console.log(allMediaLoaded); // true or false\n\n // first view only\n const firstViewMediaLoaded = await waitForAllMediaLoaded(true);\n console.log(firstViewMediaLoaded); // true or false\n})();\n```\n\n[View file β](src/libs/wait/wait-for-all-media-loaded.ts)\n\n## Security\n\n### sanitizeHtml\n\nA function that sanitizes HTML strings to prevent XSS attacks.\n\n```ts\nimport { sanitizeHtml } from \"umaki\";\n\n// Basic usage\nconst sanitized = sanitizeHtml(\n 'Hello World
'\n);\nconsole.log(sanitized); // 'Hello World
'\n\n// With custom config\nconst config = { ALLOWED_TAGS: [\"p\"] };\nconst sanitizedWithConfig = sanitizeHtml(\"Hello World
\", config);\nconsole.log(sanitizedWithConfig); // 'Hello World
'\n```\n\nThis function uses `isomorphic-dompurify` and has the following features:\n\n- Removes dangerous HTML tags and attributes by default\n- Allows flexible control through custom configuration\n- Can be used on both server-side and client-side\n\n[View file β](src/libs/security/html-sanitize.ts)\n\n## Advanced Usage\n\nThis section provides tips and patterns for getting the most out of umaki utilities.\n\n### Using `tap` / `tapAsync` with umaki functions\n\nThe `tap` and `tapAsync` functions allow you to add callbacks to any umaki function without modifying its behavior. This is useful for logging, analytics, caching, and more.\n\n#### Basic Pattern\n\n| Function Type | Use | Example |\n|---------------|-----|---------|\n| Sync (returns value) | `tap` | `tap(removeAllHtmlTags(input), callback)` |\n| Sync (returns void) | `tap` | `tap(set100vh(), callback)` |\n| Async (returns Promise) | `tapAsync` | `tapAsync(sleep(1), callback)` |\n\n> [!TIP]\n> `tap` prevents Promise values at the type level. If you accidentally pass a Promise, TypeScript will show an error.\n\n#### Examples with umaki functions\n\n