0.0.1 ā€¢ Published 6 months ago

react-minimist-utils v0.0.1

Weekly downloads
-
License
-
Repository
github
Last release
6 months ago

React Minimist Utils

npm npm downloads types

šŸš€ react-minimist-utils is a bundle of essential packages and utils in Typescript for a React application

React + TypeScript + Vite

Older version minimist-react-library

Get full template to create react app: React Minimist Boilerplate

Table of Contents

Installation

npm i react-minimist-utils

Some extra essential packages:

npm i axios
npm i date-fns
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i @reduxjs/toolkit redux-saga
npm i react-hook-form yup
npm i react-router-dom

Playground

Constants

EMAIL_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.EMAIL_REGEX;

// regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

HEX_COLOR_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.HEX_COLOR_REGEX;

// regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

HTTP_HTTPS_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.HTTP_HTTPS_REGEX;

// regex = /http(s?):\/\//gm

PASSWORD_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.PASSWORD_REGEX;

// regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,30}$/g;

UUID_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.UUID_REGEX;

// regex = /[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;

VIETNAMESE_PHONE_NUMBER_REGEX

import { CONSTANTS } from "react-minimist-utils";

const regex = CONSTANTS.VIETNAMESE_PHONE_NUMBER_REGEX;

// regex = /^(\+?)(0|84?)(3[2-9]|5[6|8|9]|7[0|6-9]|8[0-6|8|9]|9[0-4|6-9])[0-9]{7}$/gm;

Essential Packages:

clsx

import { Clsx, ClsxType } from "react-minimist-utils";

dompurify

import { dompurify, DOMPurify, DompurifyType } from "react-minimist-utils";

lodash

import { _, Lodash, LodashType } from "react-minimist-utils";

qs

import { qs, qsType } from "react-minimist-utils";

Hooks

Data

useToggle

useToggle allows a component to toggle a value between true and false

import { Hooks } from "react-minimist-utils";

const [value, toggleValue] = Hooks.Data.useToggle(false);

return (
  <>
    <button onClick={toggleValue}>Toggle</button>
    <button onClick={() => toggleValue(true)}>Make True</button>
    <button onClick={() => toggleValue(false)}>Make False</button>
  </>
);

Device

useDeviceDetect

useDeviceDetect detects whether your device is mobile or not

import { Hooks } from "react-minimist-utils";

const { isMobile } = Hooks.Device.useDeviceDetect();

Dom

useElementOnScreen

useElementOnScreen checks whether a specific DOM element comes into view or goes out of sight

import { Hooks } from "react-minimist-utils";

const buttonRef = useRef();
const isVisible = Hooks.Dom.useElementOnScreen(buttonRef);

useEventListener

useEventListener helpful in situations where you want to handle events

import { Hooks } from "react-minimist-utils";

Hooks.Dom.useEventListener("scroll", callback);

Storage

useLocalStorage, useSessionStorage

useLocalStorage, useSessionStorage helps to store data in Local Storage or Session Storage

import { Hooks } from "react-minimist-utils";

const [name, setName, removeName] = Hooks.Storage.useSessionStorage(
  "name",
  "Happy"
);
const [age, setAge, removeAge] = Hooks.Storage.useLocalStorage("age", 26);

Window

useScrolling

useScrolling checks whether window is scrolling or not

import { Hooks } from "react-minimist-utils";

const isScrolling = Hooks.Window.useScrolling();

useScrollTo

useScrollTo helps scroll to element or specific position

import { Hooks } from "react-minimist-utils";

const buttonRef = useRef();
const { scrollToElement, scrollTo, scrollToTop, scrollToBottom } =
  Hooks.Window.useScrollTo();

scrollToElement(buttonRef);

// Default is scroll to top
scrollTo(1000, 0);
scrollToTop();
scrollToBottom();

useElementPosition

useElementPosition helps to get position of specific element

import { Hooks } from "react-minimist-utils";

const { top, left, isElementInView } = Hooks.Window.useElementPosition(".btn"); // or Hooks.useElementPosition()

useWindowSize

useWindowSize helps to get current window's height, width, scrollX and scrollY

import { Hooks } from "react-minimist-utils";

const { height, width, scrollX, scrollY } = Hooks.Window.useWindowSize(); // or Hooks.useWindowSize()

Utils:

Api

fetchData

fetchData utilizes fetch data method from api

import { Utils } from "react-minimist-utils";

Utils.Api.fetchData({
  requestCallback: async () => {
    return await fetch("");
  },
  successCallback: (res) => {
    // Handle if call api successfully
  },
  failureCallback: (error) => {
    // Handle if call api failed
  },
  getLoadingState: (isLoading) => {
    if (isLoading) {
      // Toggle on loading component
    } else {
      // Toggle off loading component
    }
  },
  showLog: true,
});

Array

handleArray

handleArray helps to push, filter, update, remove, clear a list

import { Utils } from "react-minimist-utils";

const arr = [1, 2, 3];

const { push, filter, update, remove, clear } = Utils.Array.handleArray(arr); // or Utils.handleArray

const arrPush = push([7, 8, 9]);
// arrPush = [1, 2, 3, 7, 8, 9]

const arrRemove = remove(2);
// arrRemove = [1, 2, 7, 8, 9]

const arrFilter = filter((item: number) => item > 5);
// arrFilter = [7, 8, 9]

const arrUpdate = update(0, 100);
// arrUpdate = [100, 1, 2, 3, 7, 8, 9]

const arrClear = clear();
// arrClear = []

groupListByField

groupListByField handle group list by specific field

import { Utils } from "react-minimist-utils";

const list = Utils.Array.groupListByField({
  list: mockList,
  field: "name",
});

sortList

sortList only works on number list, string list & object list

import { Utils } from "react-minimist-utils";

const data = Utils.Array.sortList({
  list: mockList,
  field: "name",
  sortType: "desc", // default is "asc"
});

Data

downloadFile

downloadFile handles download a file from specific url

import { Utils } from "react-minimist-utils";

const { downloadFile, DOWNLOAD_LINK_SAMPLE } = Utils.Data;

downloadFile(DOWNLOAD_LINK_SAMPLE);

Number

numberWithComma

numberWithComma formats number with dot and comma

import { Utils } from "react-minimist-utils";

const formattedNumber = Utils.Number.numberWithComma(55250.2);

// 55,250.20

React

lazyLoad

lazyLoad creates lazy for app components

// ./Button/index.ts
import { Utils } from "react-minimist-utils";

const Button = Utils.lazyLoad(
  () => import("./Button"),
  (module) => module.Button
);
// App.js
import { Button } from "./Button"

export const App = () => {
  return <div>
    <Button>Submit<Button>
  </div>
}

String

checkWordCount

checkWordCount checks whether text length meets requirement or not

import { Utils } from "react-minimist-utils";

const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
const isTextValid = Utils.String.checkWordCount(text, 5, 30);

// {isValid: true, maxWordRequired: 30, minWordRequired: 5, wordCount: 8}

convertHexToRgb

convertHexToRgb converts HEX to RGBA color

import { Utils } from "react-minimist-utils";

const formattedNumber = Utils.String.numberWithComma(55250.2);

// 55,250.20

convertStyleObjectToString

convertStyleObjectToString converts css object into css string to use in styled-components template string

import { Utils } from "react-minimist-utils";

const styleObject = {
  color: "#000",
  fontSize: "20px",
};
const cssString = Utils.String.convertStyleObjectToString(styleObject);

// color:#000;font-size:20px;

sanitizeHTML

sanitizeHTML ensures the value entered by the end user does not contain any malicious content

import { Utils } from "react-minimist-utils";

const dirtyHTML = <p>This is dirty HTML</p>;
const htmlText = Utils.String.sanitizeHTML(dirtyHTML);

// <p>This is dirty HTML</p>

trimText

trimText trims text with ellipsis

import { Utils } from "react-minimist-utils";

const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
const newText = Utils.String.trimText(text, 50);

// {textLength: 56, textLengthRequired: 50, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing ...'}
lodashhooksreactutils
clsxdompurifylodashqsreactreact-dom
@everything-registry/sub-chunk-2567
0.0.1

6 months ago

0.0.0

6 months ago