Minimist React Library

🚀 Newer version react-minimist-utils

A bundle of essential packages with custom utils to build a web application

React + TypeScript + Vite + Storybook

Typescript Playground

Regex Playground

Lorem

Free Test Data

---

Table of Contents

- Minimist React Library
- Installation
- Constants
- EMAIL_REGEX
- HEX_COLOR_REGEX
- HTTP_HTTPS_REGEX
- PASSWORD_REGEX
- UUID_REGEX
- VIETNAMESE_PHONE_NUMBER_REGEX
- Essential Packages:
- clsx
- dompurify
- lodash
- qs
- react-hook-form
- react-router-dom
- yup
- Hooks
- Array
- useArray
- Data
- useToggle
- Device
- useDeviceDetect
- useResponsive (depreciated)
- Dom
- useElementOnScreen
- useEventListener
- Storage
- useLocalStorage, useSessionStorage
- Window
- useScrolling
- useScrollTo
- useWindowSize
- Utils:
- Api
- fetchData
- Array
- groupListByField
- sortList
- Data
- downloadFile
- Number
- numberWithComma
- React
- lazyLoad
- String
- checkWordCount
- convertHexToRgb
- convertStyleObjectToString
- sanitizeHTML
- trimText

Installation

``bash
npm i minimist-react-library
`

Some extra essential packages:

`bash
npm i axios
npm i date-fns
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i @reduxjs/toolkit redux-saga
`

Constants

$3

`js
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,}))$/;
`

$3

`js
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;
`

$3

`js
import { CONSTANTS } from "minimist-react-library";

const regex = CONSTANTS.HTTP_HTTPS_REGEX;

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

$3

`js
import { CONSTANTS } from "minimist-react-library";

const regex = CONSTANTS.PASSWORD_REGEX;

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

$3

`js
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;
`

$3

`js
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;
`

Essential Packages:

$3

`js
import { Clsx, ClsxType } from "minimist-react-library";
`

$3

`js
import { dompurify, DOMPurify, DompurifyType } from "minimist-react-library";
`

$3

`js
import { _, Lodash, LodashType } from "minimist-react-library";
`

$3

`js
import { qs, qsType } from "minimist-react-library";
`

$3

`js
import { ReactHookForm, ReactHookFormType } from "minimist-react-library";
`

$3

`js
import { ReactRouter, ReactRouterType } from "minimist-react-library";
`

$3

`js
import { Yup, YupType } from "minimist-react-library";
`

Hooks

$3

#### useArray

`js
import { Hooks } from "minimist-react-library";

const { array, set, push, remove, filter, update, clear } =
Hooks.Array.useArray([1, 2, 3, 4, 5, 6]);
`

$3

#### useToggle

`js
import { Hooks } from "minimist-react-library";

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

return (
<>
Toggle
toggleValue(true)}>Make True
toggleValue(false)}>Make False

);
`

$3

#### useDeviceDetect

`js
import { Hooks } from "minimist-react-library";

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

#### useResponsive (depreciated)

$3

#### useElementOnScreen

`js
import { Hooks } from "minimist-react-library";

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

#### useEventListener

`js
import { Hooks } from "minimist-react-library";

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

$3

#### useLocalStorage, useSessionStorage

`js
import { Hooks } from "minimist-react-library";

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

$3

#### useScrolling

`js
import { Hooks } from "minimist-react-library";

const isScrolling = Hooks.Window.useScrolling();
`

#### useScrollTo

`js
import { Hooks } from "minimist-react-library";

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

scrollToElement(buttonRef);

// Default is scroll to top
scrollTo();
`

#### useWindowSize

`js
import { Hooks } from "minimist-react-library";

const { width, height } = Hooks.Window.useWindowSize();
`

Utils:

$3

#### fetchData

`js
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,
});
`

$3

- Generate data tool

#### groupListByField

`js
import { Utils } from "minimist-react-library";

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

#### sortList

- By default, sortType is "asc"

`js
import { Utils } from "minimist-react-library";

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

$3

#### downloadFile

`js
import { Utils } from "minimist-react-library";

const { downloadFile, DOWNLOAD_LINK_SAMPLE } = Utils.Data;
downloadFile(DOWNLOAD_LINK_SAMPLE);

// 55,250.20
`

$3

#### numberWithComma

`js
import { Utils } from "minimist-react-library";

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

// 55,250.20
`

$3

#### lazyLoad

`js
import { Utils } from "minimist-react-library";

const Button = Utils.lazyLoad(
() => import("./Button"),
(module) => module.Button
);
`

$3

#### checkWordCount

`js
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}
`

#### convertHexToRgb

`js
import { Utils } from "minimist-react-library";

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

// 55,250.20
`

#### convertStyleObjectToString

`js
import { Utils } from "minimist-react-library";

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

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

#### sanitizeHTML

`js
import { Utils } from "minimist-react-library";

const dirtyHTML =

This is dirty HTML

;
const htmlText = Utils.String.sanitizeHTML(dirtyHTML);

//

This is dirty HTML

`

#### trimText

`js
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 ...'}
``