utils-snap-fn
Collect some common utility functions for use in work. If you also have some common code, welcome to submit
prfor this project.
Front-end tool function code snippets with full typescript support. If you are using TS too, you can use these in Vue, Svelte, React files, try it!
🌐 Website
https://utils-snap-fn.netlify.app
🏗️ Install
# npm
npm i utils-snap-fn -D
# yarn
yarn add utils-snap-fn -D
# pnpm
pnpm add utils-snap-fn -D⚓ Usage Example
1. On-demand Import
import { isPhoneNum } from 'utils-snap-fn'2. Full Import
import * as snapFn from 'utils-snap-fn'
// example
snapFn.isPhoneNum('18811112222') // true
snapFn.isPhoneNum('28811112222') // false3. CDN
You can download the utils-snap-fn.browser.js file from the lib directory and use it directly.
It also supports CDN, so you can include it in your HTML file through the CDN link
// <script src="./js/utils-snap-fn.browser.js"></script>
isPhoneNum('13344445555') // true4. CJS
You can download the utils-snap-fn.cjs.js file from the lib directory and use it directly.
It is designed to be used in a Node.js environment, so you can import it in your Node.js code
📦 API DOC
The examples below assume the use of import on demand
1. Regex
- isPhoneNum -- check if an phone number
isPhoneNum('13344445555') // true
isPhoneNum('28811112222') // false- isSafari -- check if is safari browser
isSafari() // true or false- isMobile -- check if is Mobile device
isMobile() // true or false- isEmail -- Check if is an email address
isEmail('123@gmail.com') // true
isEmail('123@.exm.com') // false- isIdCard -- Check if is an IdCard number
isIdCard('13068219990814293X') // true
isIdCard('187329473298') // false- isIpv4 -- Check if is an IPV4 address
isIpv4('192.168.1.1') // true
isIpv4('19.256.3.2') // false- isIpv6 -- Check if is an IPV6 address
isIpv6('2001:0db8::1:0:0:1') // true
isIpv6('2001:0db8:85a3::8a2e:03707334') // false- isValidUUID -- Check if is an valid UUID
// use the `generateUUID` function
isValidUUID(generateUUID()) // true2. Array
- isArrayEqual -- Check if two arrays are equal
isArrayEqual([1, 2, 3], [1, 2, 3]) // true
isArrayEqual([1, 2, 3], [1, 2, 3, 4]) // false- removeDuplicatesObj -- Remove duplicate objects
const arr = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'John' },
{ id: 4, name: 'Bob' },
{ id: 5, name: 'Jane' },
]
const actual = removeDuplicatesObj(arr, 'name')
/*
output:
[
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 4, name: 'Bob' },
]
*/3. Random
- generateUUID -- Generate random UUID
generateUUID() // random UUID- randomNum -- Generate random number
randomNum(11, 800) // random number- randomColor -- Generate random hex color or rgba color
randomColor('hex') // random hex color, example: #f31a34
randomColor('rgb', 0.5) // random rgba color, example: rgba(31, 55, 78, 0.5)
randomColor('rgb') // random rgba color, example: rgba(31, 55, 78, 1)4. String
- capitalsFirstLetter -- Capitals first letter
capitalsFirstLetter('hello') // Hello- uppercaseEveryWord -- Capitals every word's first letter
uppercaseEveryWord('hello world') // Hello World- uppercaseEveryLetters -- Capitals every letters
uppercaseEveryLetters('thank you javascript') // THANK YOU JAVASCRIPT- lowercaseEveryLetters -- Lowercase every letters
lowercaseEveryLetters('THANK YOU VUE') // thank you vue
lowercaseEveryLetters('THANK YOU JAVASCRIPT', 'en') // thank you javascript5. Tree
- findTreeNode -- Find a tree node
const tree = {
id: 1,
name: 'Parent',
children: [
{
id: 2,
name: 'Child 1',
children: [],
},
{
id: 3,
name: 'Child 2',
children: [
{
id: 4,
name: 'Grandchild',
children: [],
},
],
},
],
}
const result = findTreeNode(tree, 'id', 4)
/*
output:
{
id: 4,
name: 'Grandchild',
children: [],
}
*/- findAllNode -- Find all objects that meet the criteria, and return an array
const tree = {
id: 1,
name: 'Parent',
type: 'folder',
children: [
{
id: 2,
name: 'Child 1',
type: 'file',
children: [],
},
{
id: 3,
name: 'Child 2',
type: 'folder',
children: [
{
id: 4,
name: 'Grandchild',
type: 'file',
children: [],
},
],
},
],
}
const result = findAllNode(tree, 'type', 'file')
/*
output:
[
{
id: 2,
name: 'Child 1',
type: 'file',
children: [],
},
{
id: 4,
name: 'Grandchild',
type: 'file',
children: [],
}
]
*/6. Dom
- getScrollTop -- Get document scrollTop value
const scrollTopVal = getScrollTop()- setScrollTop -- Set document scrollTop value
setScrollTop(0)- scrollTo -- Scroll to document top
scrollTo(0, 1)Continuously updating...