npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-utility

v1.0.10

Published

Helpers used in react projects

Downloads

10

Readme

react-utility

These npm package contains the utilities used in our daily programming for string, arrays, objects, times, css

Installation

using npm

npm i react-utility;

using Yarn

yarn add react-utility;

Usage

import { cloneObject, cloneProps, mergeObjects, objectsDiffer, isObjectsEqual, minMaxValueInArr, sumArray, averageArray, 
sortArrOfObj, isArraysEqual, stringWHSize, strReplaceParams, lightenDarkenColor, dateFormat, minutesConvertToDayHrMin,
precise, percentage  } from 'react-utility';

Functions exported are

ObjectsFunction

These functions are used for objects

cloneObject

Makes a recursive copy of primitives and objects of type Array and Object, all other objects are copied via reference.

  @param {src} object to be copied

  result = cloneObject(src);

mergeObjects

Returns a recursive merge, which favors the structure of srcObject and the contents of dstObj.

 @param {any} srcObj
 @param {any} dstObj

 result=mergeObjects(srcObj,dstobj);

objectsDiffer

Returns true when 2 objects differ.

  @param {any} src
  @param {any} dst

result = objectsDiffer(src,dst);

cloneProps

Makes a recursive copy of primitives and objects of type Array and Object, all other objects are copied via reference. The exclude array is optional, it is used to define properties of props that are to be excluded, by default 'root' is excluded.

  @param {react props object} props
  @param {Array} exclude 

 result=cloneProps(props,exclude);

excludeList

Returns a new copy of list a, devoid of elements from list b

  @param {Array} a
  @param {Array} b

  list=excludeList(a,b)

isObjectsEqual

Returns true when 2 objects are equal.

  @param {any} obj1
  @param {any} obj2

result =isObjectsEqual(obj1,obj2)

ArraysFunction

These functions are used for Arrays

minMaxValueInArr

Get the minimum or maximum value in array. Scenario:1 arr = [ "1", 2, 4, 5, "6" ] // function converts each element of array to number. Scenario:2 arr = [ { "x" : "1" }, { "x" : "2" } ] pass additional param key "x" , return the min/max number with all the objects containing that key.

 @param {*} arr array of objects or numbers 
 @param {*} boolean value true for minimum, false for maximum
 @param {*} key used when array of objects 

result = minMaxValInArr([],true, "key")

If wrong parameter datatypes are passed 0 is returned

sumArray

Calculate the sum of elements in array. Depending upon first element in array the type of element is decided. Scenario:1 arr = [ "1", 2, 4, 5, "6" ] // function converts each element of array to number sums and return its value. Scenario:2 arr = [ { "x" : "1" }, { "x" : "2" } ] pass additional param key "x" , return the sum of all the objects containing that key.

 * @param {*} arr array of objects, numbers or string 
 * @param {*} key key is used when array of objects are found 

result =  sumArray(arr, key)

averageArray

calculate the average of elements in array. Depending upon first element in array the type of element is decided. Scenario:1 arr = [ "1", 2, 4, 5, "6" ] // function converts each element of array to number and calculate its average. Scenario:2 arr = [ { "x" : "1" }, { "x" : "2" } ] Additional param key "x" , return the average of all the objects containing that key. You can add precision to the average number by passing the third params as number, default: 2.

  @param {*} arr array of objects 
  @param {*} key in the objects
  @param {*} precision number, how many digits after period.
   
 result= averageArray([], "key", 2)

sortArrOfObj

Sorting array of objects

  @param {*} arr Arary to be sorted
  @param {*} key key to be sorted from an obj
  @param {*} order default: "asc" for ascending order && "dsc" for decending order;

  result =  sortArrOfObj([], "key", "asc");

isArraysEqual

Returns boolean value if array of strings/numbers/objects are equal. Note: type is decided from first element of array.

 @param {*} arr1 Array 
 @param {*} arr2 Array

 result =  isArraysEqual(arr1, arr2)

StringFunctions

These functions are used for Strings

stringWHSize

Returns object with param width and height of the string inrespect to below params

  @param {*} str string whose width and height is to be calculated 
  @param {*} fontSize default: 12px, units of fontsize is to be specified like px
  @param {*} fontFamily default: "open-sansreglar" , fontFamily of the string whose dimensions are to be calculated

  result =  stringWHSize("welcome", "12px", "open_sansregular");

strReplaceParams

Replace parameters in the string with its value in object passed.

  @param {*} regex Regular expression defafult is for finding params in string inbetween ${param*}
  @param {*} strToMatch String to replace to match and replace params in it
  @param {*} dataObj Object of data to replace the params 

  result =  strReplaceParams(/\${(.*?)\}/g,"",{});

Example : const stringParam = "This is example for ${x}" const newString = strReplaceParams(/${(.*?)}/g, stringParam, {x:"strReplaceParams"}); now newString is "This is example for strReplaceParams"

CssFunctions

These functions are used for CSS

lightenDarkenColor

  @param {*} col # value of color , can pass with or without #
  @param {*} amt positive/negative values to get brighter or darker color

  result = lightenDarkenColor(col, amt)

TimeFunctions

These functions are used for time format manipulation.

dateFormat

Convert the date into another format

 @param {*} inputDate date to be converted  
 @param {*} format default : 'YYYY.MM.DD HH:mm:ss TZ' 

 result= dateFormat(inputDate, 'YYYY.MM.DD HH:mm:ss TZ');

minutesConvertToDayHrMin

Convert minutes passed to days, hours and minutes. Return object containing days, hours, minutes and a string.

 @param {*} minutes number, minutes converted into day hours and min and add into string and returned 

 result= minutesConvertToDayHrMin(minutes)

AddonFunctions

precise

Add precioions to number.

   @param {*} number number whose precision we need to calculate
   @param {*} precision how many digits after period 

    result = precise(number, precision = 2)

percentage

calculate percentage of number to its base value. Can pass precision as third params

  @param {*} base base value to calulcate the percentage 
  @param {*} newValue percentage of this value is to be calculate to a base value
  @param {*} precision number of digits after period.

  result= precentage(base, newValue, 2)