utils-snap-fn

Collect some common utility functions for use in work. If you also have some common code, welcome to submit pr for 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!

:globe_with_meridians: Website

https://utils-snap-fn.netlify.app

:building_construction: Install

# npm
npm i utils-snap-fn -D

# yarn
yarn add utils-snap-fn -D

# pnpm
pnpm add utils-snap-fn -D

:anchor: 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') // false

3. 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') // true

4. 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

:package: 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('[email protected]') // true
isEmail('[email protected]') // 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()) // true

2. 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 javascript

5. 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)

7. Browser

• copyToClipboard -- Copy data to clipboard

await copyToClipboard('Thank you javascript', () => console.log('Copied!'))

8. Date

• formatTimeLength -- Format time length

formatTimeLength(45));      // 45秒
formatTimeLength(310));     // 5分10秒
formatTimeLength(7383));    // 2小时3分3秒
formatTimeLength(259200));  // 3天0小时0分0秒

Continuously updating...

LICENSE

MIT