Vanilla Utils

This is a zero-dependency collection of utility tools that will help development on vanilla-js a bit easier for you. I have always appreciated the no-framework idea for most small projects which do not require a lot of maintenance. And these are the sets of tools that I have always had in my projects in some way or form. I have compiled them here with improvements such that they are helpful in a more macroscopic level. I will keep updating it with more tools.

Access it by using this library. Or you can use it in your frontend code like this

<script src="https://mirror.harshankur.com/vanillaUtils.min.js" crossorigin="anonymous"><script>

Below is the documentation for this project.

Functions

createElement(tagName, [attributes]) ⇒ HTMLElement: Creates an element with a given attribute map in the argument for a given tagName.
openLink(url, [newTab]) ⇒ void: Opens the link provided in the argument 'url'. Based on the other argument 'newTab', it either opens it in the same tab or in a new tab. NOTE: In the case of trying to open this url in a new tab, the browser might first ask the user to enable popups for this website instead of directly opening the link.
downloadLink(url) ⇒ void: Downloads the content of the url passed in the argument. NOTE: You can only trigger download of a url which is in the same domain as the current one. There is Cross-Site access for downloads. If you pass a url from another domain, the browser usually just opens the file on the same tab which might result in loss of unsaved data in the current page.
guessMimeType(bytes) ⇒ string: Guess the MIME type based on the initial bytes of a file.
downloadFileFromBytes(bytes, name, [type]) ⇒ void: Saves the content of the byteArray passed in the argument with its filename passed in the argument.
fetchRequest(url, [config]) ⇒ Promise.<any>: Fetch handler for a request with body.
setCookie(key, value, [config]) ⇒ void: Sets cookie on the browser for the given key and value for the given duration
getCookie(key) ⇒ string: Fetches cookie value for a given key.
removeCookie(key) ⇒ void: Remove cookie for a given key.
toPromise(fn, args) ⇒ Promise.<any>: This takes a function and returns a promisied version of it. Basically it resolves after this fn is executed. It is helpful primarily when one is switching over multiple cases and some of them do not return a promise but it is easier to handle all the cases in promises.
debounce(fn, t) ⇒ function: Debounces a function, i.e., ignored repeated calls for a function. It rather takes the last call while it is waiting.
capitalize(str) ⇒ string: Capitalizes the first letter of a string.
truncate(str, length) ⇒ string: Truncates a string to a specified length and adds an ellipsis (...) if it exceeds that length.
slugify(str) ⇒ string: Converts a string into a URL-friendly slug. Converts to lowercase, removes non-word characters, and replaces spaces with dashes.
clamp(num, min, max) ⇒ number: Clamps a number between a minimum and maximum value.
formatCurrency(amount, [currency], [locale]) ⇒ string: Formats a number as a currency string.
isValidEmail(email) ⇒ boolean: Checks if a string is a valid email address. Uses a simple regex for basic validation.
isValidUrl(url) ⇒ boolean: Checks if a string is a valid URL.
sum(arr) ⇒ number: Calculates the sum of an array of numbers.
max(arr) ⇒ number: Finds the maximum number in an array.
min(arr) ⇒ number: Finds the minimum number in an array.
groupBy(arr, fn) ⇒ object: Groups items of an array based on a key returned by a callback function.

Typedefs

FetchConfig : Object
CookieConfig : Object

createElement(tagName, [attributes]) ⇒ `HTMLElement`

Creates an element with a given attribute map in the argument for a given tagName.

Kind: global function

Param	Type	Default	Description
tagName	`string`		A tag name for this new element to be created.
[attributes]	`Object.<string, any>`	`{}`	We will use this object's keys as attributes for the element and its values as the attribute values.

Example

const attributes = {
    class: 'class1 class2',
    id: 'id1',
    style: '{ display: "flex"; }',
    'data-region': 'Germany'
};
const element = createElement('div', attributes);
// <div class="class1 class2" id="id1" style="{ display: "flex"; }" data-region="Germany"></div>

Example

const attributes = {
    href: 'https://blog.harshankur.com',
    target: '_blank'
};
const element = createElement('a', attributes);
// <a href="https://blog.harshankur.com" target="_blank"></a>

openLink(url, [newTab]) ⇒ `void`

Opens the link provided in the argument 'url'. Based on the other argument 'newTab', it either opens it in the same tab or in a new tab. NOTE: In the case of trying to open this url in a new tab, the browser might first ask the user to enable popups for this website instead of directly opening the link.

Kind: global function

Param	Type	Default	Description
url	`string`		The url that you want to open on the client's browser.
[newTab]	`boolean`	`false`	Flag whether to open this url in a new tab. Please note that passing this true might get the new link (popup) blocked depending on the browser settings.

Example

openLink("https://github.com/harshankur", true);

downloadLink(url) ⇒ `void`

Downloads the content of the url passed in the argument. NOTE: You can only trigger download of a url which is in the same domain as the current one. There is Cross-Site access for downloads. If you pass a url from another domain, the browser usually just opens the file on the same tab which might result in loss of unsaved data in the current page.

Kind: global function

Param	Type	Description
url	`string`	The url from which you wish to trigger a content download.

Example

downloadLink("https://mirror.harshankur.com/vanillaUtils.min.js");

guessMimeType(bytes) ⇒ `string`

Guess the MIME type based on the initial bytes of a file.

Kind: global function
Returns: string - The guessed MIME type or 'application/octet-stream' if unknown.

Param	Type	Description
bytes	`Uint8Array`	The byte array representing the file content.

guessMimeType(bytes) ⇒ string
- ~signatures : Object.<string, string>
- ~getHexString(byteArray) ⇒ string

guessMimeType~signatures : `Object.<string, string>`

Known file signatures mapped to their corresponding MIME types.

Kind: inner constant of guessMimeType

guessMimeType~getHexString(byteArray) ⇒ `string`

Converts a byte array to a hexadecimal string.

Kind: inner method of guessMimeType
Returns: string - The hexadecimal string representation of the byte array.

Param	Type	Description
byteArray	`Uint8Array`	The byte array to convert.

downloadFileFromBytes(bytes, name, [type]) ⇒ `void`

Saves the content of the byteArray passed in the argument with its filename passed in the argument.

Kind: global function

Param	Type	Description
bytes	`Uint8Array`	File bytes.
name	`string`	The name of the file in the download
[type]	`string`	File Mimetype

Example

downloadFileFromBytes(<bytes>, 'myFile.pdf');

fetchRequest(url, [config]) ⇒ `Promise.<any>`

Fetch handler for a request with body.

Kind: global function
Returns: Promise.<any> - Returns a Promise for the fetch request.

Param	Type	Default	Description
url	`string`		Url to make this fetch request.
[config]	`FetchConfig`	`{}`	Config for this fetch request.

Example

fetchRequest('https://mirror.harshankur.com/vanillaUtils.min.js')
// GET https://mirror.harshankur.com/vanillaUtils.min.js

Example

const params = {
    method: 'POST',
    header: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: "Harsh Ankur" })
};
fetchRequest('https://post-example.com/registerName', params);
// POST https://post-example.com/registerName -H "Content-Type: application/json" -d '{ "name": "Harsh Ankur" }'

setCookie(key, value, [config]) ⇒ `void`

Sets cookie on the browser for the given key and value for the given duration

Kind: global function

Param	Type	Default	Description
key	`string`		Key of the cookie
value	`string`		Value to be set for this cookie
[config]	`CookieConfig`	`{}`	[OPTIONAL] Configuration for settings cookies

Example

setCookie("key1", "value1");
// Setting session specific cookie for key1: value1

Example

setCookie("key2", "value2", { expires: 30, path: '/' });
// Setting key2: value2 cookie on the root domain that expires in 30 days.

getCookie(key) ⇒ `string`

Fetches cookie value for a given key.

Kind: global function
Returns: string - Value of the cookie for the corresponding key.

Param	Type	Description
key	`string`	Key of the cookie.

Example

const storedValue = getCookie("key1");
// "value1"

Example

const storedValue = getCookie("key2");
// "value2"

removeCookie(key) ⇒ `void`

Remove cookie for a given key.

Kind: global function

Param	Type	Description
key	`string`	Key of the cookie

Example

getCookie("key1");
// "value1"
removeCookie("key1");
getCookie("key1");
// ""

toPromise(fn, args) ⇒ `Promise.<any>`

This takes a function and returns a promisied version of it. Basically it resolves after this fn is executed. It is helpful primarily when one is switching over multiple cases and some of them do not return a promise but it is easier to handle all the cases in promises.

Kind: global function
Returns: Promise.<any> - Promise that will be resolved once the fn function is executed.

Param	Type	Description
fn	`function`	Function that is needed to be promisied.
args	`Array.<any>`	Array of arguments to be called for this function.

debounce(fn, t) ⇒ `function`

Debounces a function, i.e., ignored repeated calls for a function. It rather takes the last call while it is waiting.

Kind: global function

Param	Type	Description
fn	`function`	Function needed to debounce
t	`number`	milliseconds delay for debouncing.

capitalize(str) ⇒ `string`

Capitalizes the first letter of a string.

Kind: global function
Returns: string - The string with its first character converted to uppercase.

Param	Type	Description
str	`string`	The string to capitalize.

Example

capitalize("hello world") 
// "Hello world"

truncate(str, length) ⇒ `string`

Truncates a string to a specified length and adds an ellipsis (...) if it exceeds that length.

Kind: global function
Returns: string - The truncated string with '...' appended if truncated.

Param	Type	Description
str	`string`	The string to truncate.
length	`number`	The maximum length of the string before truncation.

Example

truncate("Hello World", 5) 
// "Hello..."

slugify(str) ⇒ `string`

Converts a string into a URL-friendly slug. Converts to lowercase, removes non-word characters, and replaces spaces with dashes.

Kind: global function
Returns: string - The clean, slugified string.

Param	Type	Description
str	`string`	The string to slugify.

Example

slugify("Hello World!") 
// "hello-world"

clamp(num, min, max) ⇒ `number`

Clamps a number between a minimum and maximum value.

Kind: global function
Returns: number - The clamped value.

Param	Type	Description
num	`number`	The number to clamp.
min	`number`	The minimum allowed value.
max	`number`	The maximum allowed value.

Example

clamp(100, 0, 50) 
// 50

formatCurrency(amount, [currency], [locale]) ⇒ `string`

Formats a number as a currency string.

Kind: global function
Returns: string - The formatted currency string.

Param	Type	Default	Description
amount	`number`		The number to format.
[currency]	`string`	`"'USD'"`	The currency code (e.g., 'USD', 'EUR').
[locale]	`string`	`"'en-US'"`	The locale string (e.g., 'en-US', 'de-DE').

Example

formatCurrency(1234.56) 
// "$1,234.56"

isValidEmail(email) ⇒ `boolean`

Checks if a string is a valid email address. Uses a simple regex for basic validation.

Kind: global function
Returns: boolean - True if valid, false otherwise.

Param	Type	Description
email	`string`	The email string to check.

Example

isValidEmail("test@example.com") 
// true

isValidUrl(url) ⇒ `boolean`

Checks if a string is a valid URL.

Kind: global function
Returns: boolean - True if valid, false otherwise.

Param	Type	Description
url	`string`	The URL string to check.

Example

isValidUrl("https://google.com") 
// true

sum(arr) ⇒ `number`

Calculates the sum of an array of numbers.

Kind: global function
Returns: number - The total sum.

Param	Type	Description
arr	`Array.<number>`	The array of numbers to sum.

Example

sum([1, 2, 3]) 
// 6

max(arr) ⇒ `number`

Finds the maximum number in an array.

Kind: global function
Returns: number - The maximum value.

Param	Type	Description
arr	`Array.<number>`	The array to search.

Example

max([1, 5, 2]) 
// 5

min(arr) ⇒ `number`

Finds the minimum number in an array.

Kind: global function
Returns: number - The minimum value.

Param	Type	Description
arr	`Array.<number>`	The array to search.

Example

min([1, 5, 2]) 
// 1

groupBy(arr, fn) ⇒ `object`

Groups items of an array based on a key returned by a callback function.

Kind: global function
Returns: object - An object where keys are the groups and values are arrays of items.

Param	Type	Description
arr	`Array`	The array to group.
fn	`function`	The callback function that returns the key to group by.

Example

groupBy([1.1, 1.2, 2.1], Math.floor) 
// { '1': [1.1, 1.2], '2': [2.1] }

FetchConfig : `Object`

Kind: global typedef
Properties

Name	Type	Description
[method]	`'DELETE'` \| `'GET'` \| `'POST'` \| `'PUT'`	Method of the fetch call. Default is 'GET'.
[mode]	`'no-cors'` \| `'cors'` \| `'navigate'` \| `'websocket'` \| `'same-origin'`	Cross-Origin Mode. Default is 'cors' if the fetch is created using Request constructor. Otherwise it is 'no-cors'.
[cache]	`'default'` \| `'no-cache'` \| `'reload'` \| `'force-cache'` \| `'only-if-cached'`	Cache Policy. Default is 'default'.
[credentials]	`'include'` \| `'same-origin'` \| `'omit'`	Credentials Policy. Default is 'same-origin'.
[redirect]	`'manual'` \| `'follow'` \| `'error'`	Redirect Policy. Default is 'follow'.
[referrerPolicy]	`'no-referrer'` \| `'no-referrer-when-downgrade'` \| `'origin'` \| `'origin-when-cross-origin'` \| `'same-origin'` \| `'strict-origin'` \| `'strict-origin-when-cross-origin'` \| `'unsafe-url'`	Refferer Policy. Default is 'no-referrer-when-downgrade'.
[headers]	`object`	Header for this fetch request. Default is an empty object.
[body]	`object` \| `string`	Body for this fetch request. Body data type must match "Content-Type" header.

CookieConfig : `Object`

Kind: global typedef
Properties

Name	Type	Description
[expires]	`number`	Number of DAYS after which this cookie will be expired. If not specified, it would mean that the cookie is session-specific.
[path]	`string`	Indicates the path that must exist in the requested URL for the browser to send the Cookie header (e.g., '/', '/mydir'). If not specified, it defaults to the current path of the current document location.
[samesite]	`string`	Prevents the browser from sending this cookie along with cross-site requests. Possible values are lax, strict or none. Strict prevents from sending to cross-site requests. Lax allows a few basic cross-site requests but prevents many Cross-Site Requesst Forgery attacks. Default is None which implies no restriction.
[secure]	`boolean`	Specifies that the cookie should only be transmitted over a secure protocol. Default is true which would mean that this cookie will be sent over only in secure communications.

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
.github		.github
doc		doc
hooks		hooks
test		test
typings		typings
.editorconfig		.editorconfig
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vanillaUtils.js		vanillaUtils.js
vanillaUtils.min.js		vanillaUtils.min.js
vanillaUtils.min.js.map		vanillaUtils.min.js.map

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Vanilla Utils

Functions

Typedefs

createElement(tagName, [attributes]) ⇒ `HTMLElement`

openLink(url, [newTab]) ⇒ `void`

downloadLink(url) ⇒ `void`

guessMimeType(bytes) ⇒ `string`

guessMimeType~signatures : `Object.<string, string>`

guessMimeType~getHexString(byteArray) ⇒ `string`

downloadFileFromBytes(bytes, name, [type]) ⇒ `void`

fetchRequest(url, [config]) ⇒ `Promise.<any>`

setCookie(key, value, [config]) ⇒ `void`

getCookie(key) ⇒ `string`

removeCookie(key) ⇒ `void`

toPromise(fn, args) ⇒ `Promise.<any>`

debounce(fn, t) ⇒ `function`

capitalize(str) ⇒ `string`

truncate(str, length) ⇒ `string`

slugify(str) ⇒ `string`

clamp(num, min, max) ⇒ `number`

formatCurrency(amount, [currency], [locale]) ⇒ `string`

isValidEmail(email) ⇒ `boolean`

isValidUrl(url) ⇒ `boolean`

sum(arr) ⇒ `number`

max(arr) ⇒ `number`

min(arr) ⇒ `number`

groupBy(arr, fn) ⇒ `object`

FetchConfig : `Object`

CookieConfig : `Object`

About

Uh oh!

Packages

Uh oh!

Languages

License

harshankur/vanillautils

Folders and files

Latest commit

History

Repository files navigation

Vanilla Utils

Functions

Typedefs

createElement(tagName, [attributes]) ⇒ HTMLElement

openLink(url, [newTab]) ⇒ void

downloadLink(url) ⇒ void

guessMimeType(bytes) ⇒ string

guessMimeType~signatures : Object.<string, string>

guessMimeType~getHexString(byteArray) ⇒ string

downloadFileFromBytes(bytes, name, [type]) ⇒ void

fetchRequest(url, [config]) ⇒ Promise.<any>

setCookie(key, value, [config]) ⇒ void

getCookie(key) ⇒ string

removeCookie(key) ⇒ void

toPromise(fn, args) ⇒ Promise.<any>

debounce(fn, t) ⇒ function

capitalize(str) ⇒ string

truncate(str, length) ⇒ string

slugify(str) ⇒ string

clamp(num, min, max) ⇒ number

formatCurrency(amount, [currency], [locale]) ⇒ string

isValidEmail(email) ⇒ boolean

isValidUrl(url) ⇒ boolean

sum(arr) ⇒ number

max(arr) ⇒ number

min(arr) ⇒ number

groupBy(arr, fn) ⇒ object

FetchConfig : Object

CookieConfig : Object

About

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Packages 0

Uh oh!

Languages

createElement(tagName, [attributes]) ⇒ `HTMLElement`

openLink(url, [newTab]) ⇒ `void`

downloadLink(url) ⇒ `void`

guessMimeType(bytes) ⇒ `string`

guessMimeType~signatures : `Object.<string, string>`

guessMimeType~getHexString(byteArray) ⇒ `string`

downloadFileFromBytes(bytes, name, [type]) ⇒ `void`

fetchRequest(url, [config]) ⇒ `Promise.<any>`

setCookie(key, value, [config]) ⇒ `void`

getCookie(key) ⇒ `string`

removeCookie(key) ⇒ `void`

toPromise(fn, args) ⇒ `Promise.<any>`

debounce(fn, t) ⇒ `function`

capitalize(str) ⇒ `string`

truncate(str, length) ⇒ `string`

slugify(str) ⇒ `string`

clamp(num, min, max) ⇒ `number`

formatCurrency(amount, [currency], [locale]) ⇒ `string`

isValidEmail(email) ⇒ `boolean`

isValidUrl(url) ⇒ `boolean`

sum(arr) ⇒ `number`

max(arr) ⇒ `number`

min(arr) ⇒ `number`

groupBy(arr, fn) ⇒ `object`

FetchConfig : `Object`

CookieConfig : `Object`

Packages