Collection of convenience code snippets (helpers) that aims to make it a little easier to work with vanilla JS
This is a collection of simple, no dependency, vanilla JS snippets with the aim of making it easier to work with vanilla JS.
All snippets are written in TypeScript and converted into various JS versions suiting your use case:
./
: ES 6+ syntax../ts
: TypeScript (source files)../cjs
: ES 6 syntax but with CommonJS require
imports./es5
: Good old ES 5 with CommonJS require
importsThese helpers a JS platform agnostic, for browser specific helpers check out: vanillajs-browser-helpers
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.
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 . |
eachWord | Loop over each word in a 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. |
indexLoop | Iterate over indexes in an array like object (break out early with return false ). |
isArray | Tests if a given object is an 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. |
npm install vanillajs-helpers
yarn add vanillajs-helpers
// 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
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.