vanillajs-helpers

Collection of convenience code snippets (helpers) that aims to make it a little easier to work with vanilla JS

Usage no npm install needed!

<script type="module">
  import vanillajsHelpers from 'https://cdn.skypack.dev/vanillajs-helpers';
</script>

README

Vanilla JS helpers

Build Status Coverage install size

This is a collection of simple, no dependency, vanilla JS snippets with the aim of making it easier to work with vanilla JS.

All helpers are written in TypeScript and converted into various JS versions suiting your use case:

  • .js: ES 5+ syntax.
  • .mjs: ES 2020 syntax
  • .cjs: ES 2017 syntax + CommonJS require imports
  • .d.ts: TypeScript description files

BROWSER SPECIFIC HELPERS

These helpers a JS platform agnostic, for browser specific helpers check out: vanillajs-browser-helpers

ES version support

All methods are using latest techniques and generally no efforts have been made to accommodate older browsers which do not support certain features. Polyfills should be used to fill the gap. This is intentional as the need for polyfills are ever diminishing, with modern browsers (and Node environments) getting updated all the time the vast majority of the methods will be supported at one point. Also, with compilers like Babel, polyfills can be included automatically in the build process, making it simple to ensure full support. Therefore it is more future proof and clutter free to leave fallbacks and polyfills out of the methods and just focus on core functionality.

Only in few edge cases where a polyfill might be tricky to implement correctly for a given functionality, fallback functionality will be incorporated.

Note
You will have to add these snippets as part of your transpilation if you wish to have enable auto detection of polyfills.

Available methods

Method Description
camelCase Turn a phrase or word with different casing into a camelCased word.
capitalize Capitalize Each Word In A Phrase.
chunkString Chop up a string into chunks of the desired length.
currencyFormat Format a number into a specific currency format like: $ 1.000,00.
dashed Turn a phrase or word with different casing into a dashed-lowercase-phrase.
formatNumber Format a number according to a given template like: 1.000,00.
hash Create a unique hash from a string.
hexToNumber Convert Hexadecimal into a number (eg. b4 => 180).
hexToRGB Converts a Hexadecimal color to a RGB(A) color array.
isBoolean Tests if a given object is a Boolean
isFunction Tests if a given object is a Function
isGenerator Tests if a given object is a Generator function
isNumber Tests if a given object is a Number
isObject Tests if a given object is an Object (plain object)
isString Tests if a given object is a String
leadingZero Make sure a number is a string of a given length with empty slots filled up with zeroes (0), like: 007
limitDecimals Limit decimals of a floating number to a given length.
numberToHex Convert a number to a Hexadecimal representation (eg. 180 => b4).
objectType Determine what type a given object is (string, array, etc.)
pascalCase Turn a phrase or word with different casing into a PascalCased word.
phrasify Converts a word of a special casing or a phrase, into a space separated phrase.
promisefy Converts a regular method using (err, data) type of callback into a method that returns a promise.
randomHexColor Gives a random RGB color.
randomId Generates a random id string of a given length.
randomRGBColor Gives a random RGB color.
RGBToHex Converts a RGB color to a HEX color (eg. [255, 0, 0] => #ff0000)
safeDateChange Change to another date without jumping month (eg. if you are going from 31st of January to February you would normally end up in March).
snakeCase Turn a phrase or word with different casing into a snake_cased word.
truncate Ensures a max length of a given string.
uniqueArray Make sure an Array only contains unique values.

Installation

npm install vanillajs-helpers

yarn add vanillajs-helpers

Usage

// TypeScript modules
import camelCase from 'vanillajs-helpers/ts/camelCase';
camelCase('Camel cased phrase'); // camelCasedPhrase

// ES 6 Modules
import camelCase from 'vanillajs-helpers/camelCase';
camelCase('Camel cased phrase'); // camelCasedPhrase

// CommonJS Require Modules
const camelCase = require('vanillajs-helpers/cjs/camelCase').default;
camelCase('Camel cased phrase'); // camelCasedPhrase

// ES5 (using CommonJS Require Modules)
const camelCase = require('vanillajs-helpers/es5/camelCase').default;
camelCase('Camel cased phrase'); // camelCasedPhrase

Something missing?

If you have any questions, find any bugs or have ideas for missing functionality you would like to see included, feel free to add an issue in the issue list or perhaps do a Pull Request of a great snippet you created.