As the name of the repository, this is a personal & public space to achieve a collection of helper functions. This is a spontaneous and useful collection of functions that solves concurrently annoying problems for Js & React devs.

DRY (Don't Repeat Yourself)

I'm a freelance Software Engineer, my stack is Typescript & React. After some time working on different projects, I found myself facing the same problems and solving them with the same pattern. This is a repository for saving valuable time and stay as DRY as possible while working.

Examples

Phone number formatter (Js)

// Parameter> $inputValue: string// Output> "xxx-xxxx-xxxx"exportconstphoneMask=(inputValue="")=>inputValue.replace(/\D/g,"").replace(/(\d{1,3})(\d{1,4})?(\d{1,4})?/g,function(_,a,b,c){returnc ? `${a}-${b}-${c}` : b ? `${a}-${b}` : `${a}`;});/*# Usageimport { phoneMask } from "./dry";...<input type="tel" value={phoneMask(userPhone)} />// Input > "01022223333"// Output > "010-2222-3333"*/

useInputs (React - Custom hook)

importReact,{useCallback,useReducer}from"react";typeDefaultValues={[key: string]: string;};typeUseInputsAction={name: string;value: string;};functionreducer<T>(state: T,action: UseInputsAction|null){if(!action){constinitialState: any={};Object.keys(state).forEach((key)=>{initialState[key]="";});returninitialState;}return{
...state,[action.name]: action.value,};}exportdefaultfunctionuseInputs<T>(defaultValues: DefaultValues){const[state,dispatch]=useReducer(reducer,defaultValues);constonChange=useCallback((e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>)=>{dispatch({name: e.target.name,value: e.target.value,});},[]);constonReset=useCallback(()=>{dispatch(null);},[]);return[state,dispatch,onChange,onReset]as[T,typeofdispatch,typeofonChange,typeofonReset];}/*# Usageimport { useInputs } from "./dry";...// React componentconst [form, dispatch, onChange] = useInputs<MyFormType>({ email: '', password: '',});...// Render => Form JSX<form> <input  type="email" name="email" value={form.email} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { dispatch({ name: e.target.name, value: e.target.value, }); }} /> <input type="password" name="password" value={form.password} onChange={onChange} /></form>*/

Contribution

There is no structure on this repo, if you want to benefit from this repo give a STAR or FORK it! Otherwise, if you want to add your piece, please don't hesitate and send me a PR!