Utility Kit

A lightweight JavaScript utility library for modern web development.

A collection of 100 ready-to-use, categorized, and well-tested functions to speed up your web application development.

🚀 Installation

npm install @mindraseugen/utility-kit
# or
yarn add @mindraseugen/utility-kit
# or
pnpm add @mindraseugen/utility-kit

📦 Import

Full Import

import * as uk from '@mindraseugen/utility-kit';
uk.randomBgColor(document.body);
uk.calculateAverage([10, 20, 30]);

Category-based Import (Tree-shaking optimized)

import { randomBgColor, createEl, on, fadeIn, removeEl, toggleClass, hasClass, addClass, removeClass, getStyle, setStyle, scrollTo } from '@mindraseugen/utility-kit/dom';
import { calculateAverage, sum, findMax, findMin, round, calculatePercentage, isPrime, calculateHypotenuse, factorial, power, nthRoot, isInRange, clamp, randomFloat, toDegrees, toRadians, median, mode, standardDeviation, gcd, lcm, isEven, isOdd, toFixed, modulo, abs, ceil } from '@mindraseugen/utility-kit/math';
import { filterArray, sortArray, unique, shuffle, chunk, flatten, groupBy, keyBy, difference, intersection, union, without, first, last, tail, take, drop, compact, fill, range, concat, indexOf, lastIndexOf } from '@mindraseugen/utility-kit/array';
import { reverseString, countChars, capitalize, truncate, includesText, replaceText, camelCase, snakeCase, kebabCase, pascalCase, trimStart, trimEnd, repeat, words, startsWith, endsWith, padStart, padEnd, toLower, toUpper, trim, split, join, slice } from '@mindraseugen/utility-kit/string';
import { logColor, getType, generateId, randomInt, debounce, throttle, once, memoize, deepClone, deepEqual, isEmpty, isNull, isUndefined, sleep } from '@mindraseugen/utility-kit/utils';
import { select } from '@mindraseugen/utility-kit/shortcuts';

CDN (for browser)

<script src="https://unpkg.com/@mindraseugen/[email protected]/dist/utility-kit.min.js"></script>
<script>
  UtilityKit.randomBgColor(document.body);
</script>

📁 Categories

| Category | Functions | Description | |-----------|----------|-------------| | DOM | randomBgColor, createEl, on, fadeIn, removeEl, toggleClass, hasClass, addClass, removeClass, getStyle, setStyle, scrollTo | DOM manipulation and animations | | Math | calculateAverage, sum, findMax, findMin, round, calculatePercentage, isPrime, calculateHypotenuse, factorial, power, nthRoot, isInRange, clamp, randomFloat, toDegrees, toRadians, median, mode, standardDeviation, gcd, lcm, isEven, isOdd, toFixed, modulo, abs, ceil | Mathematical operations | | Array | filterArray, sortArray, unique, shuffle, chunk, flatten, groupBy, keyBy, difference, intersection, union, without, first, last, tail, take, drop, compact, fill, range, concat, indexOf, lastIndexOf | Array manipulation | | String | reverseString, countChars, capitalize, truncate, includesText, replaceText, camelCase, snakeCase, kebabCase, pascalCase, trimStart, trimEnd, repeat, words, startsWith, endsWith, padStart, padEnd, toLower, toUpper, trim, split, join, slice | String manipulation | | Utils | logColor, getType, generateId, randomInt, debounce, throttle, once, memoize, deepClone, deepEqual, isEmpty, isNull, isUndefined, sleep | General utilities | | Shortcuts | select | DOM element selection |

🎯 Usage Examples

React

import { randomBgColor } from '@mindraseugen/utility-kit';

function MyComponent() {
  return <div onClick={() => randomBgColor(document.body)}>Click me!</div>;
}

Vue

<script setup>
import { calculateAverage } from '@mindraseugen/utility-kit';
const average = calculateAverage([25, 30, 28]);
</script>
<template><p>Average: {{ average }}</p></template>

Vanilla JavaScript

import { generateId, randomInt } from '@mindraseugen/utility-kit';
const userId = generateId(16);
const randomNum = randomInt(1, 100);

🔧 Scripts

| Script | Description | |--------|-------------| | npm run build | Create bundles in /dist/ | | npm test | Run all tests | | npm run test:coverage | Run tests with coverage | | npm run dev | Build in watch mode |

📁 Project Structure

utility-kit/
├── src/                          # Source code
│   ├── dom/                      # DOM Functions
│   ├── math/                     # Math Functions
│   ├── array/                    # Array Functions
│   ├── string/                   # String Functions
│   ├── utils/                     # Utility Functions
│   ├── shortcuts/                # Shortcuts
│   └── index.js                  # Entry point
├── dist/                         # Build output
├── types/                       # TypeScript definitions
├── tests/                        # Unit tests
├── demo/                         # Interactive demos
├── package.json
├── rollup.config.js
├── tsconfig.json
└── README.md

🤝 Contributing

For detailed contribution guidelines, please see CONTRIBUTION.md.

For a quick start:

1. Fork the repository
2. Create a branch (git checkout -b feature/new-function)
3. Add your function in src/ following the conventions
4. Add tests in tests/
5. Run npm run build && npm test
6. Make a pull request

Note: You can also create new categories if you believe it improves organization.

📜 License

MIT License - see LICENSE for details.

Utility Kit - Versione Italiana

Una libreria utility JavaScript leggera per lo sviluppo web moderno.

Una raccolta di 100 funzioni pronte all'uso, categorizzate e ben testate per accelerare lo sviluppo della tua applicazione web.

🚀 Installazione

npm install @mindraseugen/utility-kit
# o
yarn add @mindraseugen/utility-kit
# o
pnpm add @mindraseugen/utility-kit

📦 Importa

Importazione completa

import * as uk from '@mindraseugen/utility-kit';
uk.randomBgColor(document.body);
uk.calculateAverage([10, 20, 30]);

Importazione basata su categorie (ottimizzato per tree-shaking)

import { randomBgColor, createEl, on, fadeIn, removeEl, toggleClass, hasClass, addClass, removeClass, getStyle, setStyle, scrollTo } from '@mindraseugen/utility-kit/dom';
import { calculateAverage, sum, findMax, findMin, round, calculatePercentage, isPrime, calculateHypotenuse, factorial, power, nthRoot, isInRange, clamp, randomFloat, toDegrees, toRadians, median, mode, standardDeviation, gcd, lcm, isEven, isOdd, toFixed, modulo, abs, ceil } from '@mindraseugen/utility-kit/math';
import { filterArray, sortArray, unique, shuffle, chunk, flatten, groupBy, keyBy, difference, intersection, union, without, first, last, tail, take, drop, compact, fill, range, concat, indexOf, lastIndexOf } from '@mindraseugen/utility-kit/array';
import { reverseString, countChars, capitalize, truncate, includesText, replaceText, camelCase, snakeCase, kebabCase, pascalCase, trimStart, trimEnd, repeat, words, startsWith, endsWith, padStart, padEnd, toLower, toUpper, trim, split, join, slice } from '@mindraseugen/utility-kit/string';
import { logColor, getType, generateId, randomInt, debounce, throttle, once, memoize, deepClone, deepEqual, isEmpty, isNull, isUndefined, sleep } from '@mindraseugen/utility-kit/utils';
import { select } from '@mindraseugen/utility-kit/shortcuts';

CDN (per browser)

<script src="https://unpkg.com/@mindraseugen/[email protected]/dist/utility-kit.min.js"></script>
<script>
  UtilityKit.randomBgColor(document.body);
</script>

📁 Categorie

| Categoria | Funzioni | Descrizione | |-----------|----------|-------------| | DOM | randomBgColor, createEl, on, fadeIn, removeEl, toggleClass, hasClass, addClass, removeClass, getStyle, setStyle, scrollTo | Manipolazione DOM e animazioni | | Math | calculateAverage, sum, findMax, findMin, round, calculatePercentage, isPrime, calculateHypotenuse, factorial, power, nthRoot, isInRange, clamp, randomFloat, toDegrees, toRadians, median, mode, standardDeviation, gcd, lcm, isEven, isOdd, toFixed, modulo, abs, ceil | Operazioni matematiche | | Array | filterArray, sortArray, unique, shuffle, chunk, flatten, groupBy, keyBy, difference, intersection, union, without, first, last, tail, take, drop, compact, fill, range, concat, indexOf, lastIndexOf | Manipolazione array | | String | reverseString, countChars, capitalize, truncate, includesText, replaceText, camelCase, snakeCase, kebabCase, pascalCase, trimStart, trimEnd, repeat, words, startsWith, endsWith, padStart, padEnd, toLower, toUpper, trim, split, join, slice | Manipolazione stringhe | | Utils | logColor, getType, generateId, randomInt, debounce, throttle, once, memoize, deepClone, deepEqual, isEmpty, isNull, isUndefined, sleep | Utilità generiche | | Shortcuts | select | Selezione elementi DOM |

🎯 Esempi di utilizzo

React

import { randomBgColor } from '@mindraseugen/utility-kit';

function MyComponent() {
  return <div onClick={() => randomBgColor(document.body)}>Cliccami!</div>;
}

Vue

<script setup>
import { calculateAverage } from '@mindraseugen/utility-kit';
const average = calculateAverage([25, 30, 28]);
</script>
<template><p>Media: {{ average }}</p></template>

JavaScript puro

import { generateId, randomInt } from '@mindraseugen/utility-kit';
const userId = generateId(16);
const randomNum = randomInt(1, 100);

🔧 Script

| Script | Descrizione | |--------|-------------| | npm run build | Crea bundle in /dist/ | | npm test | Esegui tutti i test | | npm run test:coverage | Esegui test con coverage | | npm run dev | Build in modalità watch |

📁 Struttura del progetto

utility-kit/
├── src/                          # Codice sorgente
│   ├── dom/                      # Funzioni DOM
│   ├── math/                     # Funzioni Matematiche
│   ├── array/                    # Funzioni Array
│   ├── string/                   # Funzioni Stringhe
│   ├── utils/                     # Funzioni di Utilità
│   ├── shortcuts/                # Scorciatoie
│   └── index.js                  # Punto di ingresso
├── dist/                         # Output della build
├── types/                       # Definizioni TypeScript
├── tests/                        # Test unitari
├── demo/                         # Demo interattive
├── package.json
├── rollup.config.js
├── tsconfig.json
└── README.md

🤝 Contribuire

Per linee guida dettagliate, vedi CONTRIBUTION.md.

Per iniziare velocemente:

1. Fai fork del repository
2. Crea un branch (git checkout -b feature/new-function)
3. Aggiungi la tua funzione in src/ seguendo le convenzioni
4. Aggiungi test in tests/
5. Esegui npm run build && npm test
6. Fai una pull request

Nota: Puoi anche creare nuove categorie se ritieni che migliorino l'organizzazione.

📜 Licenza

Licenza MIT - vedi LICENSE per i dettagli.

Author: MindrasEugen Version: 1.0.0 Last updated: 2026-08-08