https://github.com/neilveil/devils
A collection of useful front-end web development utility functions
https://github.com/neilveil/devils
front-end frontend-development frontend-toolkit frontend-utilities javascript-helpers javascript-toolkit utility-functions utility-library utils web-development-toolkit web-development-tools web-development-utilities
Last synced: 3 months ago
JSON representation
A collection of useful front-end web development utility functions
- Host: GitHub
- URL: https://github.com/neilveil/devils
- Owner: neilveil
- License: mit
- Created: 2023-09-28T12:00:15.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-24T07:46:27.000Z (over 1 year ago)
- Last Synced: 2025-06-29T20:03:03.608Z (3 months ago)
- Topics: front-end, frontend-development, frontend-toolkit, frontend-utilities, javascript-helpers, javascript-toolkit, utility-functions, utility-library, utils, web-development-toolkit, web-development-tools, web-development-utilities
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/devils
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
README
# Devils 🛠️
**A collection of useful front-end web development utility functions.**
## Usage Example 🚀
```js
import { delay } from 'devils'..
await delay(2)
```## Content 📦
- Storage Manager
- Theme Manager
- Query String Manager
- Scroll Back
- Delay
- Add Plural Suffix
- Get Ordinal Suffix
- Select Random in Array
- Copy to Clipboard
- Sort Array of Objects
- Arrange an Array
- Remove Duplicates
- Format Numbers with Commas
- Get Uploaded Image Details
- Audio Player
- Request Module
- Fuzzy Search in Array of Objects> Everything in less than <5KB.
## Helpers 🛠️
### Storage Manager 🗄️
The Storage Manager helpers streamline the process of reading and writing various data types to local storage, eliminating the need for manual stringification and parsing. Additionally, it handles any potential errors that may arise during these operations.
```js
// Set data
storageManager.set('my-data', { name: 'neilveil' })// Read data -> "neilveil"
storageManager.get('my-data')// Return default value if not defined -> "User"
storageManager.get('my-data-2', 'User')// Clear only 1 key
storageManager.clear('my-data')// Clear all data
storageManager.clear()
```### Theme Manager 🎨
The Theme Manager provides seamless control over both light and dark themes for your application.
```js
// Set last used theme if exists or set user preferred theme based on OS
themeManager.init()// Get current theme
themeManager.get() // Last used theme or user preferred theme// Get user preferred theme
themeManager.getPreferredTheme()// Set light theme
themeManager.set('light')// Set dark theme
themeManager.set('dark')// Toggle theme
themeManager.toggle()
```HTML structure
```html
```
> Theme manager saves theme in local storage key 'APP_THEME'.
### Query String Manager 🧮
Enables the seamless passage of object data across pages via URL query strings.
```js
// Generate query string to append in path
qsm.gen({ a: 1 }) // -> ?eyJhIjoxfQ==
```Append it in path
```html
New page
```Read data in `/my-page`
```js
// Read data
console.log(qsm.read()) // -> { a: 1 }// Read key "a"
console.log(qsm.read('a')) // -> 1// Read key "b" & return default value 2 if not found
console.log(qsm.read('b', 2)) // -> 2
```Append query string in url
```js
qsm.gen({ a: 1 }, '/my-page') // -> /my-page?eyJhIjoxfQ== | { a: 1 }
```Append query string & forward
```js
qsm.fwd({ b: 2 }, '/my-page') // -> /my-page?eyJhIjoxLCJiIjoyfQ== | { a: 1, b: 2 }
```React example
```jsx
function MyPage() {
const [a, setA] = useState(qsm.read('a', 0))return (
Profile
)
}
```### Delay ⏳
Allow your code to pause execution for a specified duration. This is valuable for displaying loaders, preventing action clicks, implementing custom animations, and more.
```js
// Wait for 2 seconds
await delay(2)or
await delay(2000, true)
```### Add Plural Suffix 📚
Maintains code cleanliness by handling the addition of plural suffixes (`s` & `ies`) without the need for extra conditional operators.
```jsx
0 {addPluralSuffix('apple', 0)}// 0 apples1 {addPluralSuffix('apple', 1)}// 1 apple2 {addPluralSuffix('apple', 2)}// 2 apples0 {addPluralSuffix('entry', 0)}// 0 entries1 {addPluralSuffix('entry', 1)}// 1 entry2 {addPluralSuffix('entry', 2)}// 2 entries
```### Get Ordinal Suffix of a Number 🥇
Streamlines your code by handling the addition of ordinal suffixes (e.g., "st", "nd", "rd", "th") without the need for extra conditional operators.
```jsx
1{getOrdinalSuffix(1)}// 1st2{getOrdinalSuffix(1)}// 2nd3{getOrdinalSuffix(1)}// 3rd4{getOrdinalSuffix(1)}// 4th101{getOrdinalSuffix(1)}// 101st102{getOrdinalSuffix(1)}// 102nd103{getOrdinalSuffix(1)}// 103rd104{getOrdinalSuffix(1)}// 104th
```### Select Random in Array 🎲
Allows you to pick a random value from an array. This is handy for displaying diverse texts, values, colors, etc., each time a user loads the application.
```jsx
const lines = ['Awesome product', 'Try once', 'Wonderful!']..
{getRandomInArray(lines)}
```### Copy to Clipboard 📋
Copy any text value to clipboard.
```js
copyText('This is some text!')
```### Clone Object 👥
Create a new copy of Javascript Object.
```js
const data = { a: 1 }const data2 = cloneObject(data)
data2.a = 2console.log(data.a, data2.a) // 1, 2
```### Sort Array of Objects 🔄
```js
const data = [
{ id: 4, name: 'Neil Arya' },
{ id: 1, name: 'Jon Doe' }
]sortObjects(data, 'id') // by "id"
sortObjects(data, 'name') // by "name"
```### Arrange an Array 🔄
```js
const data = [
{ id: 4, name: 'Neil Arya' },
{ id: 1, name: 'Jon Doe' }
]arrangeObjects([1, 4], data, 'id')
```### Remove Duplicates from an Array 🔄
```js
const data = [
{ id: 4, name: 'Neil Arya' },
{ id: 1, name: 'Jon Doe' },
{ id: 1, name: 'Jon Doe' }
]removeDuplicates(data, 'id')
```### Round number 🔵
```js
roundNumber(2.343) // 2.34
roundNumber(2.326) // 2.33// 1 decimal digit
roundNumber(2.326, 1) // 2.3
```> Decimal numbers should always be passed through this utility function to resolve floating point issues like `.1 + .2 => 0.30000000000000004`
### Format Numbers with Commas 💹
```js
formatNumber(1000000) // 1,000,000// Indian style formatting
formatNumber(1000000, true) // 10,00,000
```### Empty check 📥
Set default value if undefined `emptyCheck(value, defaultValue)`.
```js
let a = 1
let bemptyCheck(a, 2) // 1
emptyCheck(b, 0) // 0
```### Get Uploaded Image Width, Height & Size 🖼️
Get uploaded image details to validate resolution & size.
```js
getImgDetails(imageBlob) // { width: 1920, height: 1080, size: 1000000 }
```### Audio Player 🎵
Pre-load & play sound in different browsers.
```js
// Pre-load
audioPlayer('https://www.example.com/sound.mp3', 'load')// Play
audioPlayer('https://www.example.com/sound.mp3')
// or
audioPlayer('https://www.example.com/sound.mp3', 'play')// Pause
audioPlayer('https://www.example.com/sound.mp3', 'pause')// Stop
audioPlayer('https://www.example.com/sound.mp3', 'stop')
```### Request Module 📡
```js
await request({
host: 'https://www.example.com', // *required
path: '/api/profile', // *required
method: 'get', // get | post | put | patch | delete
args: { a: 1 }, // Used as "params" if get requests & "data" if post request
headers: { authorization: 'Basic jgjklewr423452vnjas==' },
params: { b: 2 }, // Get request parameters
data: { c: 3 }, // Post request data
clean: true // Default true, if true returns `response.data` & if false returns `response`
})
```Dependency [axios](https://www.npmjs.com/package/axios)
```html
```
### Fuzzy Search in Array of Objects 🔍
```js
const data = [
{ id: 4, name: 'Neil Arya', keywords: ['developers', 'open-source'] },
{ id: 1, name: 'Jon Doe', keywords: ['dummy', 'user'] }
]const searchKeys = ['name', 'keywords']
const searchString = 'neel ara'
console.log(fuse(data, searchKeys, searchString))
// Fuse options
const fuseOptions = {}
console.log(fuse(data, searchKeys, searchString, fuseOptions))
```Dependency [fuse.js](https://www.npmjs.com/package/fuse.js)
```html
```
## Contributing 🤝
Contributions are welcome! Feel free to open an issue or submit a pull request.
## License 📜
This project is licensed under the [MIT License](./license.txt).
## Developer 👨💻
Developed & maintained by [neilveil](https://github.com/neilveil).