react arrayMap utils

yathink3 — Mon, 04 Apr 2022 06:59:57 +0000

Hello React developers,

I created a utility function called reactMap and arrMap. You can make use of it. Please find the attached code below

import React from 'react';

export function reactMap(arr, ifFn, elseFn) {
  if (!arr || !Array.isArray(arr) || arr.length === 0) {
    if (elseFn) {
      if (typeof elseFn === 'function') return elseFn();
      else return elseFn;
    } else return false;
  } else {
    if (ifFn) {
      if (typeof ifFn === 'function') {
        return React.Children.toArray(arr.map(ifFn));
      } else return React.Children.toArray(arr.map(() => ifFn));
    } else if (elseFn) return false;
    else return true;
  }
}

export function arrMap(arr, ifFn, elseFn) {
  if (!arr || !Array.isArray(arr) || arr.length === 0) {
    if (elseFn) {
      if (typeof elseFn === 'function') {
        const result = elseFn();
        if (result && Array.isArray(result)) return result;
      } else {
        if (elseFn && Array.isArray(elseFn)) return elseFn;
      }
    }
  } else {
    if (ifFn) {
      if (typeof ifFn === 'function') {
        return arr.reduce((acc, item, i) => {
          const value = ifFn(item, i, arr);
          if (value === false || value === undefined) return acc;
          else return [...acc, value];
        }, []);
      } else return arr.map(() => ifFn);
    } else if (!elseFn) return arr;
  }
  return [];
}

Below is the snippet for you to know the way to use it, and also the new structure you can use replacing with the old structure.

this is old structure

const arr = [1,2,3,4,5];

{arr && Array.isArray(arr) && arr.map(val=>
    <div key={val}>{val}</div>
)}

{arr && Array.isArray(arr) && arr.length===0 &&
    <div>No data to show</div>
}

{arr && Array.isArray(arr) && arr.length!==0 &&
    <div>arr has content</div>
}

this is new structure

import { reactMap } from 'utils/reactMapUtils';

const arr = [1,2,3,4,5];

{reactMap(arr, val => <div>{val}</div>, <div>No data to show</div>)}

{reactMap(arr) && <div>arr has content</div>}

by using the above structure, we have the advantages that are listed below.

No more null check is required.
We don't have to pass the key prop anymore.
We don't have to to write array empty condition seperatly anymore too.
Don't have to check whether the arr contains data or no.

arrMap functionality similar to reactMap but arrMap always returns an array. it is useful when we want to manipulate array contents

Additional JS Prototype Functions

yathink3 — Mon, 04 Apr 2022 06:53:14 +0000

Additional useful library functions like string.toCapitalize(),
string.searchIncludes(), string.camelToTitle(), array.filterMap(), array.forAsyncSerial(), array.forAsyncParallel(), array.arrayToTree(), array.treeToArray(). which you can take benifits of this methods.

const protoTypeDefine = (dataType, name, value) => {
  if (!dataType || !name || !value || !dataType['prototype']) return;
  Object.defineProperty(dataType['prototype'], name, { enumerable: false, value });
};

protoTypeDefine(String, 'toCapitalize', function (value) {
  if (this === '') return '';
  if (value === undefined || value === false) return this.charAt(0).toUpperCase() + this.slice(1);
  return this.replace(/(^\w{1})|(\s+\w{1})/g, l => l.toUpperCase());
});

protoTypeDefine(String, 'searchIncludes', function (value) {
  if (!value) return true;
  return this.toLowerCase().includes(value.trim().toLowerCase());
});

protoTypeDefine(String, 'camelToTitle', function () {
  if (this === '') return '';
  return this.replace(/[0-9]{2,}/g, m => ` ${m} `)
    .replace(/[^A-Z0-9][A-Z]/g, m => `${m[0]} ${m[1]}`)
    .replace(/[A-Z][A-Z][^A-Z0-9]/g, m => `${m[0]} ${m[1]}${m[2]}`)
    .replace(/[ ]{2,}/g, m => ' ')
    .replace(/\s./g, m => m.toUpperCase())
    .replace(/^./, m => m.toUpperCase())
    .trim();
});

protoTypeDefine(Array, 'filterMap', function (fn = null) {
  if (typeof fn !== 'function') return this;
  return this.reduce((acc, item, i) => {
    const value = fn(item, i, this);
    if (value === false || value === undefined) return acc;
    else return [...acc, value];
  }, []);
});

protoTypeDefine(Array, 'forAsyncSerial', async function (fn = null) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    if (typeof fn !== 'function') result[i] = await this[i];
    else result[i] = await fn(this[i], i, this);
  }
  return result;
});

protoTypeDefine(Array, 'forAsyncParallel', async function (fn = null) {
  if (typeof fn !== 'function') return await Promise.all(this);
  return await Promise.all(this.map(fn));
});

protoTypeDefine(Array, 'arrayToTree', function (id = null, link = 'parentId') {
  return this.filterMap(item => {
    if (!(id === null ? !this.some(ele => ele.id === item[link]) : item[link] === id)) return;
    return { ...item, children: this.arrayToTree(item.id, link) };
  });
});

protoTypeDefine(Array, 'treeToArray', function (key = 'children') {
  return this.reduce((acc, curr) => {
    const newArr = (curr[key] || []).treeToArray(key);
    return [...acc, ...newArr].map(({ [key]: child, ...ele }) => ele);
  }, this);
});

Note :

You need to import file without specifying from and also import at root level of your code and make sure imported only once.

import 'utils/prefixUtility';

example code:

const newArr = [1,2,3,4].filterMap((ele) => {
  if(ele % 2 === 0) return;
  return ele * 2;
});

// output of newArr : [2,6]

// simplified code

const newArr = [1,2,3,4].filterMap((ele) => ele % 2 !== 0 && ele * 2);
// output of newArr : [2,6]

and also if you want create new prototype methods you can make use of protoTypeDefine function.

protoTypeDefine(DataType, method_name, function_which_need_to_add);

Forem: yathink3

react arrayMap utils

Additional JS Prototype Functions

Note :