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

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

Constants

EMAIL_REGEX

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

HEX_COLOR_REGEX

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;

HTTP_HTTPS_REGEX

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

const regex = CONSTANTS.HTTP_HTTPS_REGEX;

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

PASSWORD_REGEX

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

const regex = CONSTANTS.PASSWORD_REGEX;

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

UUID_REGEX

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;

VIETNAMESE_PHONE_NUMBER_REGEX

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:

clsx

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

dompurify

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

lodash

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

qs

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

react-hook-form

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

react-router-dom

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

yup

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

Hooks

Array

useArray

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

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

Data

useToggle

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>
  </>
);

Device

useDeviceDetect

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

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

useResponsive (depreciated)

Dom

useElementOnScreen

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

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

useEventListener

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

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

Storage

useLocalStorage, useSessionStorage

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

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

Window

useScrolling

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

const isScrolling = Hooks.Window.useScrolling();

useScrollTo

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

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

scrollToElement(buttonRef);

// Default is scroll to top
scrollTo();

useWindowSize

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

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

Utils:

Api

fetchData

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

Array

• Generate data tool

groupListByField

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

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

sortList

• By default, sortType is "asc"

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

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

Data

downloadFile

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

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

// 55,250.20

Number

numberWithComma

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

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

// 55,250.20

React

lazyLoad

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

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

String

checkWordCount

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

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

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

// 55,250.20

convertStyleObjectToString

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

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

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

sanitizeHTML

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>

trimText

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