Frequently used hooks for React

Install

npm i @rtkcd/utils

yarn add @rtkcd/utils

useDebounce (with lodash)

import { useDebounce } from '@npm.piece/utils'

const log = useDebounce((params) => console.log(params), 1000);

log("123")

useThrottle (with lodash)

import { useThrottle } from '@npm.piece/utils'

const log = useThrottle((params) => console.log(params), 1000);

log("123")

usePortraitDetect

import { usePortraitDetect } from '@npm.piece/utils'

const isPortrait = usePortraitDetect()

useOnlineDetect

import { useOnlineDetect } from '@npm.piece/utils'

const isOnline = useOnlineDetect()

useSizeDetect

import { useSizeDetect } from '@npm.piece/utils'

const {
  clientHeight,
  clientWidth,
  innerHeight,
  innerWidth
} = useSizeDetect()

useKeyPressDetect

import { useKeyPressDetect } from '@npm.piece/utils'

const isKeyFPressed = useKeyPressDetect("f")

useOnKeyPress

import { useOnKeyPress } from '@npm.piece/utils'

const callback = useCallback(() => {
  // i use toLowerCase() in code, so it doesn't matter, if you use 'Enter' or 'enter'
  console.log('npm.piece')
}, [])

useOnKeyPress(callback, 'Enter')

useInterval

import { useInterval } from '@npm.piece/utils'

useInterval(() => {
}, 1000);

useTimeout

import { useTimeout } from '@npm.piece/utils'

useTimeout(() => {
}, 1000);

useFocus

import { useFocus } from '@npm.piece/utils'

const [htmlElRef, setFocus] = useFocus()

useEffect(() => {
  setFocus()
}, [])

return <input ref={htmlElRef} />

useIsVisibleElement

import { useIsVisibleElement } from '@npm.piece/utils'

const checkViewPortRef = useRef < HTMLDivElement > (null);
const isInViewPort = useIntersection(checkViewPortRef);

return <div ref={checkViewPortRef} />

useEffectWithoutFirstCall

import { useEffectWithoutFirstCall } from '@npm.piece/utils'

useEffectWithoutFirstCall(() => {
}, []);

CustomServiceInjector

The Service Injector component is designed to inject custom hooks containing useEffect, to your application without calling re-render of child components.

import { ServiceInjector } from '@npm.piece/utils'

<ServiceInjector
  services={[condition.service, mobile.service]}
/>

ErrorBoundary

import { ErrorBoundary } from '@npm.piece/utils'

<ErrorBoundary errorComponent={<h1>error</h1>}>
    <div/>
</ErrorBoundary>

ArrayRender

This component is a generic component for displaying an array of elements. Instead of just using map to convert an array of elements into JSX elements, the ArrayRender component takes an array of items and a renderItem function and processes them internally. The main purpose of this component is to simplify repetitive code when displaying a list of items and keep the code clean and modular.

import { ArrayRender } from '@npm.piece/utils'

<ArrayRender items={items} renderItem={(item) => <itemTemplate key />} />

deepClone

import { deepClone } from '@npm.piece/utils'

const newObj = deepClone({ name: 'npm.piece' })

MergeObjects

import { mergeObjects } from '@npm.piece/utils'

const a = {
  name: 'npm.piece',
  location: {
    city: 'City 17'
  }
}

const b = {
  age: 18,
  location: {
    flat: 'H15'
  }
}

const c = {
  price: 100
}


const d = mergeObjects(a, b, c)
// d will be:
const d = {
  name: 'npm.piece',
  age: 18,
  price: 100,
  location: {
    city: 'City 17',
    flat: 'H15'
  }
}

setToSessionStorage / setToLocalStorage / getFromSessionStorage / getFromLocalStorage

import {
  setToSessionStorage,
  setToLocalStorage,
  getFromSessionStorage,
  getFromLocalStorage
} from '@npm.piece/utils'

  setToSessionStorage('token', { age: 100 })
  setToLocalStorage('token', { age: 100 }),
  getFromSessionStorage('token'),
  getFromLocalStorage('token')

Micro-Frontend Events

import { useSubscribe, eventTransfer } from '@npm.piece/utils'

const [green, setGreen] = useState < string > ('')

useSubscribe < { text: string } > (
  // or use string like 'green'
  {
    mfName: 'green',
    eventName: 'CloseEvent',
    tag: 'tag'
  },
    (e) => setGreen(e.text))

eventTransfer < { text: string } > ({
  data: {
    text: e.target.value
  },
  debug: true,
  // or use string like 'green'
  name: {
    mfName: 'green',
    eventName: 'CloseEvent',
    tag: 'tag'
  }
})

IndexedDB (with idb)

import { IndexedDB } from '@npm.piece/utils'

useEffect(() => {
  const runIndexDb = async () => {
    const idb = new IndexedDB('test')
    //if you need to delete database, add new version number for second argument
    await idb.createObjectStore(['languages', 'students'], 1)
    await idb.putValue('languages', { name: 'JavaScript' })
    await idb.putBulkValue('languages', [
      { name: 'TypeScript' },
      { name: 'C#' }
    ])
    await idb.getValue('languages', 1)
    await idb.getAllValue('languages')
    await idb.deleteValue('languages', 1)
  }
  runIndexDb()
}, [])