π Newer version react-minimist-utils
A bundle of essential packages with custom utils to build a web application
React + TypeScript + Vite + Storybook
Table of Contents
npm i minimist-react-library
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
import { CONSTANTS } from "minimist-react-library";
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,}))$/;
import { CONSTANTS } from "minimist-react-library";
const regex = CONSTANTS.HEX_COLOR_REGEX;
// regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
import { CONSTANTS } from "minimist-react-library";
const regex = CONSTANTS.HTTP_HTTPS_REGEX;
// regex = /http(s?):\/\//gm
import { CONSTANTS } from "minimist-react-library";
const regex = CONSTANTS.PASSWORD_REGEX;
// regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,30}$/g;
import { CONSTANTS } from "minimist-react-library";
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;
import { CONSTANTS } from "minimist-react-library";
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;
import { Clsx, ClsxType } from "minimist-react-library";
import { dompurify, DOMPurify, DompurifyType } from "minimist-react-library";
import { _, Lodash, LodashType } from "minimist-react-library";
import { qs, qsType } from "minimist-react-library";
import { ReactHookForm, ReactHookFormType } from "minimist-react-library";
import { ReactRouter, ReactRouterType } from "minimist-react-library";
import { Yup, YupType } from "minimist-react-library";
import { Hooks } from "minimist-react-library";
const { array, set, push, remove, filter, update, clear } =
Hooks.Array.useArray([1, 2, 3, 4, 5, 6]);
import { Hooks } from "minimist-react-library";
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>
</>
);
import { Hooks } from "minimist-react-library";
const { isMobile } = Hooks.Device.useDeviceDetect();
import { Hooks } from "minimist-react-library";
const buttonRef = useRef();
const isVisible = Hooks.Dom.useElementOnScreen(buttonRef);
import { Hooks } from "minimist-react-library";
Hooks.Dom.useEventListener("scroll", callback);
import { Hooks } from "minimist-react-library";
const [name, setName, removeName] = Hooks.Storage.useSessionStorage(
"name",
"Happy"
);
const [age, setAge, removeAge] = Hooks.Storage.useLocalStorage("age", 26);
import { Hooks } from "minimist-react-library";
const isScrolling = Hooks.Window.useScrolling();
import { Hooks } from "minimist-react-library";
const buttonRef = useRef();
const { scrollToElement, scrollTo } = Hooks.Window.useScrollTo();
scrollToElement(buttonRef);
// Default is scroll to top
scrollTo();
import { Hooks } from "minimist-react-library";
const { width, height } = Hooks.Window.useWindowSize();
import { Utils } from "minimist-react-library";
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,
});
import { Utils } from "minimist-react-library";
const list = Utils.Array.groupListByField({
list: mockList,
field: "name",
});
- By default, sortType is "asc"
import { Utils } from "minimist-react-library";
const data = Utils.Array.sortList({
list: mockList,
field: "name",
sortType: "desc",
});
import { Utils } from "minimist-react-library";
const { downloadFile, DOWNLOAD_LINK_SAMPLE } = Utils.Data;
downloadFile(DOWNLOAD_LINK_SAMPLE);
// 55,250.20
import { Utils } from "minimist-react-library";
const formattedNumber = Utils.Number.numberWithComma(55250.2);
// 55,250.20
import { Utils } from "minimist-react-library";
const Button = Utils.lazyLoad(
() => import("./Button"),
(module) => module.Button
);
import { Utils } from "minimist-react-library";
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}
import { Utils } from "minimist-react-library";
const formattedNumber = Utils.String.numberWithComma(55250.2);
// 55,250.20
import { Utils } from "minimist-react-library";
const styleObject = {
color: "#000",
fontSize: "20px",
};
const cssString = Utils.String.convertStyleObjectToString(styleObject);
// color:#000;font-size:20px;
import { Utils } from "minimist-react-library";
const dirtyHTML = <p>This is dirty HTML</p>;
const htmlText = Utils.String.sanitizeHTML(dirtyHTML);
// <p>This is dirty HTML</p>
import { Utils } from "minimist-react-library";
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 ...'}