vanillajs-helpers

This package has been moved to @jsfns/core and is no longer maintained in this repository.

Vanilla JS helpers

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.