@npm.piece/hooks v1.0.4

Frequently used hooks for React

Install

npm i @npm.piece/hooks

yarn add @npm.piece/hooks

useDebounce (with lodash)

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

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

log("123")

useThrottle (with lodash)

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

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

log("123")

useEffectWithoutFirstCall

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

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

useSessionStorage

import {useSessionStorage} from '@npm.piece/hooks'

const { get, set } = useSessionStorage('item')
set({key:"value"})
get()

useLocalStorage

import {useLocalStorage} from '@npm.piece/hooks'

const { get, set } = useLocalStorage('item')
set({key:"value"})
get()

usePortraitDetect

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

const isPortrait = usePortraitDetect()

useOnlineDetect

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

const isOnline = useOnlineDetect()

useMobileSizeDetect

import {useMobileSizeDetect} from '@npm.piece/hooks'

const isMobileWidth = useMobileSizeDetect(768)

useKeyPressDetect

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

const isKeyFPressed = useKeyPressDetect("f")

useInterval

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

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

useFocus

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

const [htmlElRef, setFocus] = useFocus()

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

return <input ref={htmlElRef}/>

useIntersection

import {useIntersection} from '@npm.piece/hooks'

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

return <div ref={checkViewPortRef}/>