JSPM

react-js-plugins package is a lightweight and powerful toolkit for developers, providing reusable solutions for various application requirements. react-js-plugins offers a comprehensive collection of utility functions designed to simplify common development tasks. Key functionalities include form validation, date formatting, array/object manipulation, and exporting data to Excel. Additional features include browser/device detection, storage management, reducers, performance optimization utilities, and string/number formatting tools. Install it via npm i react-js-plugins to streamline your development workflow.

Installation

Install the package:

npm install react-js-plugins
# or
yarn add react-js-plugins
# or
pnpm add react-js-plugins

Features

Here's the properly structured documentation with clear purpose explanations:

🚨 _alert

Shows a customizable alert modal.

// 🚨 Alert Dialog
await _alert({ title: "Delete Item?", text: "This action cannot be undone." });

🔐 _encryptJson

Encrypts a JSON object using AES encryption with a secret key.

// 🔐 Encrypt JSON
const encrypted = _encryptJson({ name: "John" }, "secret123");

🔓 _decryptJson

Decrypts AES-encrypted JSON string using a secret key.

// 🔓 Decrypt JSON
const decrypted = _decryptJson(encryptedString, "secret123");

🔐 _encryptString

Encrypts a plain string using AES encryption, with optional random IV.

// 🔐 Encrypt String
const result = _encryptString("mySecretText", "secretKey");

🔓 _decryptString

Decrypts an AES-encrypted string using the provided IV and secret key.

// 🔓 Decrypt String
const plainText = _decryptString(ciphertext, iv, "secretKey");

🔐 _encryptPayload

Encrypts a full payload using a randomly generated key and IV, secured by a static key.

// 🔐 Encrypt Payload
const payload = _encryptPayload({ id: 1 }, "mainSecretKey");

🔑 _generatePassword

Generates a strong random password with mixed characters.

// 🔑 Generate Random Password
const newPassword = _generatePassword(12);

🕐 _getStartStopTime

Returns the start and end datetime of a given date's month in specified format.

// 🕐 Get Start & Stop Time
const { startTime, stopTime } = _getStartStopTime(new Date());

📭 _isEmptyArray

Checks if a given value is an empty array.

// 📭 Check Empty Array
const isEmpty = _isEmptyArray([]);

📭 _isEmptyObject

Checks if an object has no own properties.

// 📭 Check Empty Object
const isObjEmpty = _isEmptyObject({});

🔍 _isValueInArray

Checks whether a value exists in a given array.

// 🔍 Value in Array
const exists = _isValueInArray([1, 2, 3], 2);

📤 _exportToExcel

Exports JSON data to an Excel file.

// 📤 Export to Excel
_exportToExcel([{ name: "John" }], "UserList");

⏳ _promise

Creates a delay for a given time using Promise.

// ⏳ Delay Execution
await _promise(1000); // 1 second delay

🧭 _hasItem

Searches recursively in a menu tree to find an item by path.

// 🧭 Find Menu Item by Path
const item = _hasItem(menuItems, "/dashboard");

🔎 _hasElement

Searches recursively in a menu tree to find an element by key and value.

// 🔎 Find Element in Menu
const found = _hasElement(menuItems, "id", 5);

If you'd like, I can also format and insert these directly as JSDoc comments above each function in your code for better IntelliSense support. Want that too?

- 🔁 _flattenArray

Flattens nested arrays by recursively extracting item.data if present.

// 🔁 Flatten Nested Arrays
const flat = _flattenArray(nestedArray);

- 🧠 _dynamicReducer

Creates a simple dynamic reducer using generic action handler logic.

// 🧠 Dynamic Reducer
const reducer = _dynamicReducer(initialState);

- ⚙️ _genericReducer

A generic reducer accepting predefined handlers for each action type.

// ⚙️ Generic Reducer with Custom Actions
const reducer = _genericReducer(initialState, customActions);

- 💰 _thousandSeparator

Formats a number with thousand separators and fixed decimal precision.

// 💰 Thousand Separator
const formatted = _thousandSeparator(1234567.89);

- 📆 _getFinancialYear

Returns the current financial year based on today's date.

// 📆 Get Financial Year
const fy = _getFinancialYear();

- 🗃️ _getStorage

Handles local/session storage actions like GET, SET, REMOVE, CLEAR.

// 🗃️ Use Local Storage
const data = _getStorage({ action: 'GET', type: 'local', key: 'user' });

- 🧬 _deepClone

Deep clones an object using JSON.stringify and JSON.parse.

// 🧬 Deep Clone
const clone = _deepClone(originalObj);

- 🍪 _getCookie

Retrieves a cookie value by its name.

// 🍪 Get Cookie
const token = _getCookie('auth_token');

- 📝 _setCookie

Sets a cookie with a name, value, and expiry (in days).

// 📝 Set Cookie
_setCookie('auth_token', 'abc123', 7);

- 🔀 _mergeObjects

Merges two objects, giving priority to the second object’s properties.

// 🔀 Merge Objects
const merged = _mergeObjects(obj1, obj2);

- 🗺️ _mapObject

Maps over an object and returns an array using a callback.

// 🗺️ Map Object
const result = _mapObject(myObj, (key, value) => `${key}: ${value}`);

- 🟰 _isEqual

Checks deep equality of two values using JSON.stringify.

// 🟰 Check Equality
const isSame = _isEqual(obj1, obj2);

- 🔡 _capitalize

Capitalizes the first character of a string.

// 🔡 Capitalize
const name = _capitalize("john");

- 💵 _convertToCurrency

Converts a number to a formatted currency string.

// 💵 Convert to Currency
const price = _convertToCurrency(2500, 'INR');

- 🌐 _getBrowserInfo

Returns the name of the browser (e.g., Chrome, Firefox).

// 🌐 Get Browser Info
const browser = _getBrowserInfo();

- 📱 _isMobile

Detects if the current device is a mobile device.

// 📱 Check if Mobile
const mobile = _isMobile();

- 📦 _parseJSON

Safely parses a JSON string into an object.

// 📦 Parse JSON
const obj = _parseJSON(jsonString);

- 🧾 _stringifyJSON

Safely converts an object to a JSON string.

// 🧾 Stringify JSON
const str = _stringifyJSON(obj);

- ⬆️ _scrollToTop

Scrolls the page smoothly to the top.

// ⬆️ Scroll to Top
_scrollToTop();

🧪 _batchProcess

Processes an array of data in asynchronous batches.

await _batchProcess(myArray, 10, async (item) => {
  await handleItem(item);
});

🧰 _flattenObject

Flattens a nested object into dot notation key-value pairs.

const flat = _flattenObject({ a: { b: 1 } }); // { 'a.b': 1 }

🔗 _deepMerge

Recursively merges two objects.

const merged = _deepMerge(obj1, obj2);

🍰 _chunk

Splits an array into chunks of a given size.

const parts = _chunk([1, 2, 3, 4], 2); // [[1,2], [3,4]]

⏳ _asyncDebounce

Debounces an async function call.

const debouncedFn = _asyncDebounce(fetchData, 500);
debouncedFn();

🧬 _deepCloneArray

Deeply clones an array of objects.

const cloned = _deepCloneArray(originalArray);

📈 _getMaxMinValue

Finds the max and min values in an array.

const { max, min } = _getMaxMinValue([5, 2, 9]);

🔁 _asyncMap

Async map over array items one by one.

const results = await _asyncMap(ids, fetchById);

🔄 _transformAsyncData

Applies a transformer to each array item asynchronously.

const updated = await _transformAsyncData(data, transformFn);

🧭 _getNestedProperty

Retrieves value from object using a string path.

const value = _getNestedProperty(user, 'profile.name');

🧪 _deepEqual

Deep comparison between two objects.

const isSame = _deepEqual(objA, objB);

🧱 _mergeArrays

Merges two arrays and removes duplicates.

const merged = _mergeArrays(arr1, arr2);

🧹 _filterDuplicates

Removes duplicates based on a specific object key.

const unique = _filterDuplicates(users, 'id');

🧮 _sortByKey

Sorts array of objects by a specific key.

const sorted = _sortByKey(products, 'price');

⚡ _mapAsync

Parallel async map over array.

const data = await _mapAsync(users, fetchDetails);

📅 _formatDate

Formats a date based on a custom pattern.

_formatDate(new Date(), 'YMD'); // e.g., "Apr 9, 2025"

📊 _calPercentage

Calculates the percentage of a value relative to total.

_calPercentage(40, 200); // 20

➕ _sum

Returns the sum of an array of numbers.

_sum([1, 2, 3]); // 6

📉 _average

Calculates the average of numbers in an array.

_average([4, 8]); // 6

💰 _getPriceAfterTax

Adds tax to a given price.

_getPriceAfterTax(100, 18); // 118

⏱️ _calculateTimeDifference

Returns difference between two dates in readable format.

_calculateTimeDifference(start, end); // "1d 2h 3m 4s"

🔍 _arrayIncludesObject

Checks if array contains object (by value).

_arrayIncludesObject(arr, obj);

🐫 _toCamelCase

Converts kebab-case or snake_case to camelCase.

_toCamelCase('hello_world'); // helloWorld

❄️ _freeze

Freezes an object to make it immutable.

const frozen = _freeze(config);

🔒 _isFreeze

Checks if object is frozen.

_isFreeze(obj); // true/false

🧯 _seal

Seals an object to prevent adding/removing properties.

_seal(settings);

🔐 _isSeal

Checks if object is sealed.

_isSeal(obj); // true/false

🔄 _arrayToObject

Converts array of key-value pairs to object.

_arrayToObject([['a', 1], ['b', 2]]);

🔁 _objectToArray

Converts object to array of key-value pairs.

_objectToArray({ a: 1 }); // [['a', 1]]

🧩 _arrayToObjectByKey

Converts array of objects to object using a key.

_arrayToObjectByKey(users, 'id');

✅ _isInArray

Checks if a value exists in array.

_isInArray(['a', 'b'], 'b'); // true

🧮 _getObjectValues

Returns object values as an array.

_getObjectValues({ a: 1, b: 2 }); // [1, 2]

🔀 _swapArrayElements

Swaps two elements in an array.

_swapArrayElements(arr, 0, 1);

🔎 _filterObjectByKey

Filters object based on allowed keys.

_filterObjectByKey(user, ['id', 'name']);

📜 _getScrollPosition

Returns current window scroll position.

const { scrollX, scrollY } = _getScrollPosition();

🤝 _arrayIntersection

Returns common elements between two arrays.

_arrayIntersection([1,2,3], [2,3,4]); // [2,3]

🔧 _getArrayOfObjectsByProperty

Returns all objects with a specific property value.

_getArrayOfObjectsByProperty(data, 'type', 'active');

📥 _downloadBlob

Triggers download of a Blob object.

_downloadBlob(blob, 'myfile.pdf');

📄 _fileToBase64

Converts a file to a base64-encoded string.

const base64 = await _fileToBase64(file);

📄 _base64ToBlob

Converts a base64-encoded string into a Blob object.

const blob = _base64ToBlob(base64String);

🧰 _initializeFormValues

Initializes form values with empty strings for each field.

const initialValues = _initializeFormValues(['name', 'email']);

📋 _dynamicRequiredValidation

Generates a Yup schema with required validations for given fields.

const schema = _dynamicRequiredValidation(['name', 'email']);

📋 _generateYupValidation

Creates a Yup validation schema with all fields marked as required.

const schema = _generateYupValidation(['name', 'age']);

🧩 _initializeFormikFields

Returns an object with default empty string values for Formik fields.

const formikFields = _initializeFormikFields(['username', 'password']);

🛠️ _setNestedProperty

Sets a deeply nested property in an object using a string path.

_setNestedProperty(obj, 'user.address.city', 'Mumbai');

🔁 _transformArray

Applies a transformation function to each item in an array.

const result = _transformArray(users, user => user.name);

🔍 _findObjectById

Finds an object in an array by its id.

const item = _findObjectById(items, '123');

🧬 _getUniqueValues

Returns an array of unique values.

const unique = _getUniqueValues([1, 2, 2, 3]);

🔗 _mergeArraysByKey

Merges two arrays of objects based on a common key.

const merged = _mergeArraysByKey(arr1, arr2, 'id');

🧹 _removeDuplicates

Removes duplicate objects based on a key.

const cleaned = _removeDuplicates(data, 'email');

📚 _groupBy

Groups array items by a given key.

const grouped = _groupBy(users, 'department');

➖ _arrayDiff

Returns the difference between two arrays.

const diff = _arrayDiff(['a', 'b'], ['b']);

🧪 _deepCompareArrays

Checks if two arrays are deeply equal.

const isEqual = _deepCompareArrays(arr1, arr2);

📝 _updateObjectInArray

Updates a matching object in an array by key-value.

const updated = _updateObjectInArray(users, 'id', '123', { name: 'New Name' });

🔑 _getKeyByValue

Returns the first key in an object with the matching value.

const key = _getKeyByValue(obj, 'targetValue');

🔑 _getValueByKey

Returns the value of a key from an object.

const value = _getValueByKey(obj, 'username');

🔑 _getKeysByValue

Finds all keys in an object with a specific value.

const keys = _getKeysByValue(obj, 'active');

🗓 _dateFormat

Formats a date using Moment.js with the specified format.

const formatted = _dateFormat(new Date(), 'YYYY-MM-DD');

⏳ _dateTransformer

Recursively formats all dates in an object or array.

const result = _dateTransformer(data);

🧪 _escapeRegExpMatch

Escapes special characters for regex matching.

const escaped = _escapeRegExpMatch('a+b*c');

🔍 _isExactMatch

Checks if a string contains an exact word match using regex.

const match = _isExactMatch('The quick brown fox', 'quick');

📏 _bytesToSize

Converts byte size into a human-readable format.

const size = _bytesToSize(1024); // "1 KB"

🔁 _swapArrayByKey

Sorts an array in descending order based on a key.

const sorted = _swapArrayByKey(data, 'score');

✅ _setTouchedFields

Marks all fields with errors as touched in a Formik form.

_setTouchedFields(formRef, errors);

✅ _isValidForm

Validates a Formik form and returns whether it's valid.

const isValid = await _isValidForm(formRef);

✅ _validateFormRef

Returns form validity and error details from a Formik ref.

const { isValid, errors } = await _validateFormRef(formRef);

🧩 _handleParentsMenu

Recursively updates parent menu's assigned state and permissions based on children.

_handleParentsMenu(currentArr, menuID);

🧩 _handleParentNode

Recursively updates parent permissions based on child permissions.

_handleParentNode(currentArr, menuID, permissionKey);

🧩 _handleChildrenMenu

Recursively sets assigned state and permissions of child nodes.

_handleChildrenMenu(currentArr, parentKey, checked);

🔢 _allowDecimalKeys

Allows only decimal input and valid control keys.

<input onKeyDown={_allowDecimalKeys} />

🔡 _allowAlphaKeys

Allows only alphabetic input and valid control keys.

<input onKeyDown={_allowAlphaKeys} />

📋 _handlePasteDecimalKeys

Prevents pasting invalid decimal values.

<input onPaste={_handlePasteDecimalKeys} />

📋 _handlePasteAlphabetKeys

Prevents pasting non-alphabetic characters.

<input onPaste={_handlePasteAlphabetKeys} />

🔠 _allowAlphaNumericKeys

Allows only alphanumeric keys during typing.

document.addEventListener('keydown', _allowAlphaNumericKeys);

🧹 _clearNode

Hides specific sibling DOM nodes relative to a base element.

_clearNode('.my-element', [{ type: 'previous', steps: 1 }]);

🔍 _isElementPresent

Checks if an element exists in the DOM.

const exists = _isElementPresent('.my-element');

❌ _removeElement

Removes an element from the DOM.

_removeElement('#to-remove');

🧬 _getParent

Returns parent of a DOM element.

const parent = _getParent('.child');

👶 _getChildElements

Returns child elements of a selector.

const children = _getChildElements('.container');

✍️ _replaceContent

Replaces inner HTML of an element.

_replaceContent('#content', '<p>New content</p>');

🧪 _cloneElement

Clones a DOM element.

const clone = _cloneElement('.to-clone');

📜 _scrollToElement

Scrolls smoothly to an element.

_scrollToElement('#target');

🧾 _isElementInViewport

Checks if element is visible in viewport.

const isVisible = _isElementInViewport('.my-element');

🚫 _setElementDisabled

Enables or disables a DOM element.

_setElementDisabled('#submit-btn', true);

🎧 _addEventListenerToElement

Attaches an event listener to a DOM element.

_addEventListenerToElement('#my-btn', 'click', handleClick);

🔕 _removeEventListenerFromElement

Removes a specific event listener.

_removeEventListenerFromElement('#my-btn', 'click', handleClick);

🏷️ _getElementAttribute

Gets the value of an element’s attribute.

const id = _getElementAttribute('.item', 'data-id');

🏷️ _setElementAttribute

Sets an attribute on a DOM element.

_setElementAttribute('.item', 'data-id', '123');

🏷️ _removeElementAttribute

Removes an attribute from an element.

_removeElementAttribute('.item', 'data-id');

🗑️ _removeAllChildren

Clears all child nodes of an element.

_removeAllChildren('#container');

🧾 _getElementsByClass

Returns elements with a given class.

const elements = _getElementsByClass('my-class');

🔖 _getElementsByTag

Returns elements with a given tag name.

const buttons = _getElementsByTag('button');

🎨 _setMultipleStyles

Applies multiple CSS styles to an element.

_setMultipleStyles('.card', { color: 'red', fontWeight: 'bold' });

🧩 _insertHTML

Injects HTML at a specific position.

_insertHTML('#box', 'beforeend', '<div>Hello</div>');

🧷 _isDocumentLoaded

Checks if the document has fully loaded.

if (_isDocumentLoaded()) { /* safe to run code */ }

🖼️ _runOnIframeLoad

Runs a callback when iframe finishes loading.

_runOnIframeLoad('#myIframe', () => console.log('Loaded'));

♻️ _reloadAfterLoad

Reloads page after a delay post-load.

_reloadAfterLoad(3000); // Reload 3s after load

License

MIT