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

mcode-react-helper

v1.0.4

Published

all mcode global common function

Downloads

7

Readme

Debouncing Function

Description

The debouncing function is used to debounce any function, allowing you to limit how frequently a function is called over a certain period of time.

Usage

To use the debouncing function, you can pass in the callback function you want to debounce, along with any arguments it requires and the debounce time. For example, suppose you have a search input field in your React application and you want to limit how frequently the search function fires as the user types. You can use the debouncing function to achieve this. Here's an example:

export const debouncing = ({ args, callback, time = 300 }) => {
  const timerId = setTimeout(() => {
    callback(args);
  }, time);
  return { timerId };
};

// Example usage
const { timerId } = debouncing({ args: 'searchQuery', callback: getSliderData, time: 300 });

// Clear the timer if needed
return () => {
  clearTimeout(timerId);
};

image supported format check Function

Description

This file describes the isSupportedImageFormat function used to identify basic image formats based on their magic bytes..

Explanation:

-> This function takes a buffer containing image data as input. -> It checks the buffer for magic bytes that identify common image formats: PNG, JPG/JPEG, and GIF. -> Magic bytes are the initial few bytes in an image file that indicate its format. -> The function uses a dictionary called magicBytes to store the expected magic byte sequences for each supported format. -> It iterates through each format and checks if the first bytes of the buffer match the corresponding magic bytes using the every method. -> If a match is found, the function returns true, indicating a supported format. -> If none of the checks match, the function returns false, indicating an unsupported format.

const buffer = // Your image data buffer
const isSupported = isSupportedImageFormat(buffer);

if (isSupported) {
  console.log("Supported image format (PNG, JPG/JPEG, or GIF)");
} else {
  console.log("Unsupported image format");
}

Note:

-> This method only performs a basic check based on magic bytes and doesn't guarantee complete image validity or handle corrupted files. -> Consider using image processing libraries for more robust image validation if needed.

randomStr Function

Description

The randomStr function generates a random string of a specified length.

Installation

This function is a standalone JavaScript function and can be used in any JavaScript project. Simply copy the function into your codebase.

Usage

To use the randomStr function, call it with the desired length of the random string as an argument. For example:

const randomString = randomStr(10);
console.log(randomString);

Output:

e.g., "aB3$Z7tK"

HyperLink Function

Description

The HyperLink function extracts the domain from a URL and returns a hyperlink string.

Usage

To use the HyperLink function, call it with a URL string as an argument. For example:

const url = 'https://www.example.com/page';
const hyperlink = HyperLink(url);
console.log(hyperlink);

Output:

e.g.,"https://example.com/page"

generateGridId Function

Description

The generateGridId function adds a serial number (sNo) to each item in a grid based on the current page and page size.

Usage

To use the generateGridId function, call it with the current page number, page size, and the grid data as arguments. For example:

const page = 1;
const pageSize = 10;
const gridData = [{ name: 'John' }, { name: 'Jane' }, { name: 'Doe' }];

const gridWithIds = generateGridId(page, pageSize, gridData);
console.log(gridWithIds);

Output:

[
  { "name": "John", "sNo": 1 },
  { "name": "Jane", "sNo": 2 },
  { "name": "Doe", "sNo": 3 }
]

maxLengthCheck Function

Description

The maxLengthCheck function checks the length of an input value and truncates it if it exceeds the maximum length specified in the input element.

Usage

To use the maxLengthCheck function, pass the event object containing the target input element. For example:

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('input', (event) => {
  maxLengthCheck(event);
});

Example

Assuming the input element has a maxLength attribute of 10:

  • Input: "Hello, world!"
  • Output: "Hello, worl"

truncateString Function

Description

The truncateString function truncates a string if it exceeds a specified length and appends ellipsis (...) to the end.

Usage

To use the truncateString function, pass the string and the maximum length as arguments. For example:

const str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
const truncated = truncateString(str, 20);
console.log(truncated);

Output:

"Lorem ipsum dolor si..."

isNullish Function

Description

The isNullish function checks if a value is either undefined or null.

Usage

To use the isNullish function, pass the value you want to check. For example:

const value1 = null;
const value2 = undefined;

console.log(isNullish(value1)); // Output: true
console.log(isNullish(value2)); // Output: true
console.log(isNullish('Hello')); // Output: false

isEmpty Function

Description

The isEmpty function removes nullish values (undefined or null) from an object and returns a new object without those values.

Usage

To use the isEmpty function, pass an object as the argument. For example:

const obj = {
  name: 'John',
  age: null,
  city: 'New York',
  country: undefined
};

const cleanedObj = isEmpty(obj);
console.log(cleanedObj);

Output:

{
  "name": "John",
  "city": "New York"
}

getYoutubeVideoId Function

Description

The getYoutubeVideoId function extracts the video ID from a YouTube video URL.

Usage

To use the getYoutubeVideoId function, pass a YouTube video URL as the argument. For example:

const uri = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
const videoId = getYoutubeVideoId(uri);
console.log(videoId);

Output

"dQw4w9WgXcQ"

dataURLtoBlob Function

Description

The dataURLtoBlob function converts a data URL to a Blob object.

Usage

To use the dataURLtoBlob function, pass a data URL string as the argument. For example:

const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...';
const blob = dataURLtoBlob(dataURL);
console.log(blob);

isBase64 Function

Description

The isBase64 function checks if a string is a valid base64 string.

Usage

To use the isBase64 function, pass a string as the argument. For example:

const str1 = 'SGVsbG8gV29ybGQh'; // Valid base64 string
const str2 = 'Hello, World!'; // Not a valid base64 string

console.log(isBase64(str1)); // Output: true
console.log(isBase64(str2)); // Output: false

getDomainWithoutSubdomain Function

Description

The getDomainWithoutSubdomain function extracts the domain name from a URL, removing any subdomains.

Usage

To use the getDomainWithoutSubdomain function, pass a URL string as the argument. For example:

const url = 'https://www.example.com/page';
const domain = getDomainWithoutSubdomain(url);
console.log(domain);

Output

"example.com"

slugUrlConverter Function

Description

The slugUrlConverter function converts a string to a URL-friendly slug format.

Usage

To use the slugUrlConverter function, pass an object with a value property as the argument. For example:

const input = { value: 'Hello World' };
const slug = slugUrlConverter(input);
console.log(slug);

output

"hello-world"

isCheckValue Function

Description

The isCheckValue function checks if a value is not null, not undefined, and not an empty string.

Usage

To use the isCheckValue function, pass an object with a value property as the argument. For example:

const input = { value: 'Hello' };
console.log(isCheckValue(input)); // Output: true

const emptyInput = { value: '' };
console.log(isCheckValue(emptyInput)); // Output: false

removeUrlKeyInBGI Function

Description

The removeUrlKeyInBGI function extracts the URL from a CSS background-image property value.

Usage

To use the removeUrlKeyInBGI function, pass an object with a urlString property as the argument. For example:

const input = { urlString: 'url("https://example.com/image.jpg")' };
const extractedUrl = removeUrlKeyInBGI(input);
console.log(extractedUrl);

output

"https://example.com/image.jpg"

convertRGBA Function

Description

The convertRGBA function converts a CSS RGBA color string to an object format.

Usage

To use the convertRGBA function, pass an object with an rgbString property as the argument. For example:

const input = { rgbString: 'rgb(255 0 0 / 0.5)' };
const rgbaObject = convertRGBA(input);
console.log(rgbaObject);

output

{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.5
}

addUrlImage Function

Description

The addUrlImage function formats a URL string as a CSS background image URL.

Usage

To use the addUrlImage function, pass an object with a urlString property as the argument. For example:

const input = { urlString: 'https://example.com/image.jpg' };
const bgImage = addUrlImage(input);
console.log(bgImage);

output

"url('https://example.com/image')"

isValidDomain Function

Description

The isValidDomain function checks if a given string is a valid domain name.

Usage

To use the isValidDomain function, pass a domain name string as the argument. For example:

console.log(isValidDomain('example.com'));
console.log(isValidDomain('example'));

output

Output: true
Output: false

setCookie Function

Description

The setCookie function sets a cookie in the browser with the specified name, value, expiration days, and domain.

Usage

To use the setCookie function, pass the name, value, expiration days, and optional domain as arguments. For example:

setCookie('myCookie', 'value', 7, '.example.com');

getCookie Function

Description

The getCookie function retrieves the value of a cookie with the specified name.

Usage

To use the getCookie function, pass the name of the cookie as an argument. For example:

const cookieValue = getCookie('myCookie');
console.log(cookieValue);

deleteCookie Function

Description

The deleteCookie function deletes a cookie with the specified name and domain.

Usage

To use the deleteCookie function, pass the name and domain of the cookie to be deleted as arguments. For example:

deleteCookie('myCookie', '.example.com');

setValueNull Function

Description

The setValueNull function recursively sets all values in an object to null, except for arrays, which are set to empty arrays.

Usage

To use the setValueNull function, pass an object as the argument. For example:

const obj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const nullObj = setValueNull(obj);
console.log(nullObj);

output

{
  "name": null,
  "age": null,
  "address": {
    "city": null,
    "country": null
  }
}

setValueNullRedirect Function

Description

The setValueNullRedirect function recursively sets all values in an object to an empty string, except for arrays, which are set to empty arrays.

Usage

To use the setValueNullRedirect function, pass an object as the argument. For example:

const obj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const emptyObj = setValueNullRedirect(obj);
console.log(emptyObj);

output

{
  "name": "",
  "age": null,
  "address": {
    "city": "",
    "country": ""
  }
}

getLocalStringTime Function

Description

The getLocalStringTime function takes a time string in the format "HH:mm" and returns a JavaScript Date object with the time set to the input time in the local timezone.

Usage

To use the getLocalStringTime function, pass a time string as the argument. For example:

const timeString = '10:30';
const dateObject = getLocalStringTime(timeString);
console.log(dateObject);

removeAllSpacesInString Function

Description

The removeAllSpacesInString function removes all spaces from a given string.

Usage

To use the removeAllSpacesInString function, pass a string as the argument. For example:

const stringWithSpaces = 'Hello, World!';
const stringWithoutSpaces = removeAllSpacesInString(stringWithSpaces);
console.log(stringWithoutSpaces);

output

Output: "Hello,World!"

removeNumberInputScroll Function

Description

The removeNumberInputScroll function removes focus from a number input field, preventing the up and down arrow keys from changing its value.

Usage

To use the removeNumberInputScroll function, pass an event object as the argument. For example, in a React component:

<input type="number" onKeyDown={removeNumberInputScroll} />

preventUpDownKeys Function

Description

The preventUpDownKeys function prevents the default behavior of the up and down arrow keys and the minus key in a keyboard event.

Usage

To use the preventUpDownKeys function, pass an event object as the argument. For example, in a React component:

<input type="text" onKeyDown={preventUpDownKeys} />