Javascript Utility Functions
Install
NPM
npm install @wilfredlopez/react-utils
Script Tag
<script src="https://unpkg.com/@wilfredlopez/react-utils@latest/dist/index.umd.js"></script>
<script type="text/javascript">
console.log(ReactUtils.Cipher)
</script>
ES6
Validator
import { Validator } from "@wilfredlopez/react-utils"
Validator.isEmail('bad@notemail'); //false
Validator.isEmail('test@gmail.com'); //true
Validator.isNotEmptyString(""); //false
Validator.isNotEmptyString("some data")); //true
Validator.isDate("10/20/2020", "MM/DD/YYYY") //true
Validator.isDate("2020/01/01") //true;
Validator.isDate("anyInvalidDate") //false;
Validator.isInt("2.1") //false
Validator.isPort(5000) //true
Validator.isPort(10.1) //false
Validator.isPort(80000000) //false
Validator.isURL("https://www.wilfredlopez.net") //true
Validator.isURL("www.test.com")//true
Validator.isURL("www.test.") //false
memoize
import { memoize } from '@wilfredlopez/react-utils'
const fibMemo = memoize(function (n: number): number {
if (n <= 2) return 1
return fibMemo(n - 1) + fibMemo(n - 2)
})
console.log(fibMemo(20)) //6765
console.log(fibMemo(30)) //832040
console.log(fibMemo(20)) //6765;
console.log(fibMemo(100)) //354224848179262000000
console.log(
fibMemo.cache.size //100
)
Mapper
import { Mapper } from '@wilfredlopez/react-utils'
const initialData = {
test1: 1,
test2: 2,
}
const dataMap = new Mapper<number, string>(initialData)
console.log(dataMap.length) //2
console.log(dataMap.set('test3', 3).delete('test1')) //1
console.log(dataMap.has('test1')) //false
console.log(dataMap.get('test2')) //2
console.log(dataMap.isEmpty()) //false
dataMap.map(val => {
console.log(val) // 2, 3
})
StringHelper & NumberHelper
import { StringHelper, NumberHelper } from '@wilfredlopez/react-utils'
StringHelper.slogify('hello world') //"hello-world";
StringHelper.toProperCase(' hello world 2') //" Hello World 2";
const pg = new PatternGenerator("'WL'-XXXXX")
const codes = []
console.log(pg.next) //WL-H2QDD
while (codes.length < 50) {
codes.push(pg.next)
}
console.log(codes) //[ 'WL-H2QDD', 'WL-LHCO7', 'WL-0EFK6', 'WL-SQU7W',...,'WL-9NYHX' ]
NumberHelper.formatDuration(10000) //"02:46:40";
const arr = [...NumberHelper.range({ start: 0, end: 10 })]
console.log(arr) // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const iter = ArrayHelper.createReverseArrayIterator([1, 2, 3, 4])
for (let i of iter) {
console.log(i) // 4,3,2,1
}
console.log(NumberHelper.isPrime(7)) //true
console.log(NumberHelper.isPrime(20)) //false
DeepCopy
import { deepCopy } from '@wilfredlopez/react-utils'
const originalUser = { name: 'SOMEONE' }
const original = { api: { db: { users: [{ user: originalUser }] } } }
const copy = deepCopy(original)
const regularCopy = Object.assign({}, data)
originalUser.name = 'FULANO'
console.log(copy.api.db.users[0].user.name) // SOMEONE (DEEP COPY)
console.log(original.api.db.users[0].user.name) // FULANO (MUTATED)
console.log(regularCopy.api.db.users[0].user.name) // FULANO (MUTATED)
Assertions
import {
AssertionError,
assert,
assertIsString,
forceString,
} from '@wilfredlopez/react-utils'
const error = new AssertionError('message')
const n = 1
function doSomething(value) {
assert(typeof n === 'number')
return n + 20
}
doSomething('string') //throws error
function sendMessage(message: any) {
assertIsString(message) //throws error if not string
message.trim() //will give you auto-complete for string type
}
assertNever
import { assertNever } from '@wilfredlopez/react-utils'
enum AppActions {
'SET_STATE',
'ADD',
'REMOVE',
}
interface Actions {
type: AppActions
payload: any
}
export function myReducer(state = {}, action: Actions): {} {
switch (action.type) {
case AppActions.SET_STATE:
return { ...state, ...action.payload }
case AppActions.ADD:
return { ...state }
case AppActions.REMOVE:
return {
...state,
}
default:
assertNever(action.type, 'Not all actions are being handled.')
return state
}
}
Random Generator (for test data)
import { RandomGenerator } from '@wilfredlopez/react-utils'
const dg = new RandomGenerator({
animals: ['dog', 'panda', 'cat'],
})
console.log(dg.from('animals')) //cat
console.log(dg.from('animals')) //dog
IndexDB Store
import { indexDBStore } from '@wilfredlopez/react-utils'
const store = indexDBStore.createStore('WDB', 'myStore', {
version: 1,
onupgradeHandler: (store, request, event) => {
//do transactions that can only happen on upgrade events.
store.createIndex('IdIndex', 'id', { unique: true })
console.log(request, event)
},
})
//write
store.readwrite(db => {
db.add({ id: '1', name: '1 name' }, '1')
db.add({ id: '2', name: '2 name' }, '2')
})
//get all entries
store.entries().then(data => {
console.log({ entries: data })
})
//get all values
store.values().then(values => {
console.log('values: ', { values })
})
//Read
store.readonly.get('2').then(value => {
console.log('value with key 2 is: ', value)
})
//COUNT: Retrieve the number of records matching the given key
//COUNT: Object API
const range = IDBKeyRange.bound('0', '2')
store.count(range).then(result => {
console.log(`count is : `, result)
})
//COUNT: Function API
store('readonly', db => {
const request = db.count('2')
request.onsuccess = function () {
console.log(`count is : `, this.result)
}
})
//delete
store.del('1').then(() => {
console.log('Delete complete for key 1')
})
store.readonly.get('1').then(value => {
console.log('value with key 1 is now: ', value)
})
//Clear all the data in store.
store.clear().then(() => {
console.log('store is cleared.')
})
Other Utilities
- [
createGlobalStyle
] - Append styles to document's head. you can pass a string or an object with CSSProperties as arguments.
import { createGlobalStyle } from '@wilfredlopez/react-utils'
/*
Appends to document's head
<style>
body{
background-color: red;
}
</style>
*/
createGlobalStyle({
body: {
backgroundColor: 'red',
},
})
//OR
createGlobalStyle(`
body: {
background: red;
}
`)