DOCSEARCHbyAlgolia
Submit Docs

common-utils-pkg

website·Indexed 30 days ago

https://common-utils-pkg.js.org

A package of commonly used JavaScript utilities providing functions for color manipulation (invertColor, colorBrightness, randomPastelColor), string formatting (slugify, toSentenceCase, toTitleCase), storage management (storageSet, storageGet, storageRemove, storageClear), and general helpers like guid, safeJsonParse, and browserDetect.

Tokens
2.7K
Snippets
22
Records
41
Agent score
48%

What's inside common-utils-pkg

  1. Install common-utils-pkg

    Install the common-utils-pkg library using npm or Yarn.
    # Using NPM
npm i --save common-utils-pkg

# Using Yarn
yarn add common-utils-pkg

  2. Remove deprecated arrayToString and stringToArray utilities

    Starting with v4.2.0, arrayToString and stringToArray have been removed. Developers should use the native JavaScript methods Array.prototype.join and String.prototype.split respectively.

  3. Use common-utils-pkg in the browser

    Include the library via unpkg and access the utilities through the window['common-utils-pkg'] global object.
    <script src="https://unpkg.com/common-utils-pkg"></script>
<script>
  // Access specific methods
  const randomPastelColor = window['common-utils-pkg'].randomPastelColor;
  randomPastelColor();

  // Access all methods
  const UTILS = window['common-utils-pkg'];
  UTILS.randomPastelColor();
</script>

  4. Use common-utils-pkg with ES6 modules

    Import specific utility functions individually or import the entire utility set as a namespace object.
    // Import specific methods
import { randomPastelColor } from 'common-utils-pkg';
randomPastelColor();

// Import all methods
import * as UTILS from 'common-utils-pkg';
UTILS.randomPastelColor();

  6. Use readableColor for text readability

    The readableColor utility (introduced in v4.3.0) provides the appropriate light or dark mode color to ensure text readability against a given background.

  7. Store data in local storage using storageSet

    The storageSet function allows you to save data to the browser's local storage. It requires a unique key to identify the entry and the data value to be stored.
    storageSet('key', data);

  8. Invert a HEX color using invertColor

    The invertColor function takes a HEX color string and returns its inverted HEX color equivalent. It supports both full 6-digit HEX codes and shorthand 3-digit HEX codes.
    // Invert a full 6-digit HEX color
invertColor('#E3CCA8');
// => '#1C3357'

// Invert a shorthand 3-digit HEX color
invertColor('ccc');
// => '#333333'

  9. Convert a string to a URL slug using slugify

    The slugify function converts a provided string into a slug suitable for URL usage. It handles case normalization (converting to lowercase), removes special characters, and replaces spaces/punctuation with hyphens. It also supports normalizing special characters (e.g., 'ï' to 'i').
    slugify('The quick brown fox');
// => 'the-quick-brown-fox'

slugify('A. more-Complicated string!..');
// => 'a-more-complicated-string'

slugify('wïth speciäl chærs');
// => 'with-special-chars'

  10. Configure readableBytes with custom units and decimals

    As of v4.3.1, the readableBytes function accepts an optional options object as the second parameter. This allows developers to specify the minimum unit and the number of decimal places for the formatted output.
    readableBytes(number, { /* options for decimal and minimum unit */ });

  11. Convert bytes to human readable file size using readableBytes

    The readableBytes function converts a number of bytes into a human-readable string (e.g., '1.21 kB'). It accepts the number of bytes and an optional options object to control precision and the minimum unit displayed.
    readableBytes(1234);
// => "1.205078125 kB"

readableBytes(1234, { decimals: 2 });
// => "1.21 kB"

readableBytes(500, { minUnit: 'kB' });
// => "0.48828125 kB"

readableBytes(500, { decimals: 2, minUnit: 'kB' });
// => "0.49 kB"

  12. Adjust HEX color brightness with colorBrightness

    The colorBrightness function brightens or darkens a HEX color based on a specified percentage, behaving similarly to SASS lighten and darken functions. The returned value is always a string starting with the # symbol.
    // Brighten a color by 50%
colorBrightness('#3CB878', 50);
// => '#6EEAAA'

// Darken a color by 50%
colorBrightness('#3CB878', -50);
// => '#A8646'