sui-js
Set of useful js utilities
$ npm install @s-ui/js --save
pipe
Consist of a chain of processing functions, where the output of each element is the input of next
import pipe from @s-ui/js/lib/pipe
const textToUpperCase = text => text.toUpperCase()
const textToArray = text => [...text]
const title = 'Schibsted'
console.log(pipe(textToUpperCase, textToArray)(title))
asyncPipe
Consist of a chain of processing async and sync functions, where the output of each element is the input of next. The result is a promise.
import {asyncPipe} from @s-ui/js/lib/pipe
const textToUpperCase = async text => text.toUpperCase()
const textToArray = async text => [...text]
const title = 'Schibsted'
asyncPipe(textToUpperCase, textToArray)(title).then(result => {
console.log(result)
})
cookie
Parse, get and set cookies. Returns an object cookie
with parse
, get
and set
methods.
Note: set
method does not work on server side.
import cookie from '@s-ui/js/lib/cookie'
const {parse} = cookie
domain.config('cookie', parse(cookies))
const {get: getCookie} = cookie
const smartBannerCookie = getCookie('smartbanner')
const {set: setCookie} = cookie
const setSmartBannerCookie = setCookie('smartbanner', 1, {expires: 7, path: ''})
events
Creates an event and dispatches it
import {dispatchEvent} from '@s-ui/js/lib/events'
dispatchEvent({
eventName: 'NAME_OF_THE_EVENT_TO_DISPATCH',
detail: {
parameter_one: 'one',
anotherParameter: 2
}
})
function
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
Arguments
func (Function): The function to debounce.
wait=0: The number of milliseconds to delay.
options={}: The options object.
options.leading=false: Specify invoking on the leading edge of the timeout.
options.maxWait: The maximum time func is allowed to be delayed before it's invoked.
options.trailing=true: Specify invoking on the trailing edge of the timeout.
Returns
(Function): Returns the new debounced function.
import {debounce} from '@s-ui/js/lib/function'
const callback = debounce(() => {}, 300)
hash
Creates an insecure, but with pretty low collisions, hash based on MD5. Returns a string with the hash.
import {createHash} from '@s-ui/js/lib/hash'
const stringToHash = 'This is the string that we will hash'
const md5Hash = createHash(stringToHash)
console.log(md5Hash)
string
A bunch of string utilities: remove accents, parse query strings...
import {removeAccents, hasAccents} from '@s-ui/js/lib/string'
console.log(removeAccents('París'))
console.log(hasAccents('Árbol'))
import {parseQueryString} from '@s-ui/js/lib/string'
console.log(parseQueryString('?targetPage=pta'))
import {fromArrayToCommaQueryString} from '@s-ui/js/lib/string'
console.log(
fromArrayToCommaQueryString({userId: 1, adId: 2, products: [3, 4, 5]})
)
import {htmlStringToReactElement} from '@s-ui/js/lib/string'
htmlStringToReactElement('<p>No more dangerouslySetInnerHTML</p>')
import {getRandomString} from '@s-ui/js/lib/string'
const randomStringLength = 6
const randomString = getRandomString(randomStringLength)
console.log(randomString.length)
console.log(randomString)
import {toQueryString} from '@s-ui/js/lib/string'
const queryParams = {a: 1, b: 'lorem/ipsum', m: [1, 2]}
const options = {arrayFormat: 'repeat', delimiter: ':'}
const queryString = toQueryString(queryParams, options)
console.log(queryString)
const queryParams = {a: 1, b: 'lorem/ipsum', m: [1, 2]}
const options = {encode: false}
const queryString = toQueryString(queryParams, options)
console.log(queryString)
import {highlightText} from '@s-ui/js/lib/string'
const highlightedText = highlightText({
value: 'Cádiz',
query: 'ca',
startTag: '<strong>',
endTag: '</strong>'
})
ua-parser
A user agent parser. Returns an object stats
{
browserName: <string>,
browserVersion: <string>,
isMobile: <boolean>,
isTablet: <boolean>,
osName: <string>
}
import {stats} from '@s-ui/js/lib/ua-parser'
const {isMobile, osName} = stats(userAgent)
domain.config('isMobile', isMobile)
domain.config('osName', osName)
classes
Utilities to easily format classNames following the current convention for component-{children}-element--modifier
import {suitClass} from '@s-ui/js/lib/classes'
const baseComponent = suitClass('baseComponent')
const childrenComponent = baseComponent({children: 'childrenComponent'})
const className = childrenComponent({element: 'element', modifier: 'modifier'})
array
Utilities to manipulate arrays
import {shuffle} from '@s-ui/js/lib/array'
const list = [1,2,3,4,5]
const shuffledList = shuffle(list)
console.log(shuffledList)