react-useheadroom
Version:
A fully-typed lightweight react custom hook that returns the state of the shown/hidden header (headroom).
1 lines • 3.77 kB
Source Map (JSON)
{"version":3,"sources":["../src/binary/useHeadroom.ts","../src/binary/helpers.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { callOnPin, callOnUnpin, callOnFix, callOnUnfix } from './helpers';\nimport { type UseHeadroomProps } from './types';\n\nconst initialProps: UseHeadroomProps = {\n onPin: () => null,\n onUnpin: () => null,\n onFix: () => null,\n onUnfix: () => null,\n fixAt: 0,\n};\nconst useHeadroom = (props = initialProps) => {\n const { onPin, onUnpin, fixAt = 0, onFix, onUnfix } = props;\n const [scroll, setScroll] = React.useState(0);\n\n useEffect(() => {\n const handleScroll = () => setScroll(window.scrollY);\n window.addEventListener('scroll', handleScroll);\n\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const scrollRef = React.useRef({ scroll: scroll });\n\n useEffect(() => {\n callOnPin(scrollRef.current.scroll, scroll, fixAt, onPin);\n }, [scroll < fixAt || scrollRef.current.scroll <= scroll]);\n\n useEffect(() => {\n callOnUnpin(scrollRef.current.scroll, scroll, fixAt, onUnpin);\n }, [scroll < fixAt ? scroll < fixAt : scrollRef.current.scroll >= scroll]);\n\n useEffect(() => {\n callOnFix(scroll, fixAt, onFix);\n }, [scroll <= fixAt]);\n\n useEffect(() => {\n callOnUnfix(scrollRef.current.scroll, scroll, fixAt, onUnfix);\n }, [scroll > fixAt]);\n\n useEffect(() => {\n scrollRef.current.scroll = scroll;\n }, [scroll]);\n\n return scrollRef.current.scroll >= scroll || scroll <= fixAt;\n};\n\nexport default useHeadroom;\n","export const callOnPin = (\n prevScroll: number,\n scroll: number,\n fixAt: number,\n onPin?: () => any\n) => {\n !!onPin && prevScroll > scroll && scroll > fixAt && onPin();\n};\n\nexport const callOnUnpin = (\n prevScroll: number,\n scroll: number,\n fixAt: number,\n onUnpin?: () => any\n) => {\n !!onUnpin && prevScroll <= scroll && scroll > fixAt && onUnpin();\n};\n\nexport const callOnFix = (\n scroll: number,\n fixAt: number,\n onFix?: (...args: any[]) => any\n) => {\n !!onFix && scroll <= fixAt && onFix(fixAt);\n};\n\nexport const callOnUnfix = (\n prevScroll: number,\n scroll: number,\n fixAt: number,\n onUnfix?: (...args: any[]) => any\n) => {\n !!onUnfix && prevScroll === fixAt && scroll > prevScroll && onUnfix(fixAt);\n};\n\nexport const isPresent = (fn: any) => (!!fn ? fn : null);\n"],"mappings":";AAAA,OAAO,SAAS,iBAAiB;;;ACA1B,IAAM,YAAY,CACvB,YACA,QACA,OACA,UACG;AACH,GAAC,CAAC,SAAS,aAAa,UAAU,SAAS,SAAS,MAAM;AAC5D;AAEO,IAAM,cAAc,CACzB,YACA,QACA,OACA,YACG;AACH,GAAC,CAAC,WAAW,cAAc,UAAU,SAAS,SAAS,QAAQ;AACjE;AAEO,IAAM,YAAY,CACvB,QACA,OACA,UACG;AACH,GAAC,CAAC,SAAS,UAAU,SAAS,MAAM,KAAK;AAC3C;AAEO,IAAM,cAAc,CACzB,YACA,QACA,OACA,YACG;AACH,GAAC,CAAC,WAAW,eAAe,SAAS,SAAS,cAAc,QAAQ,KAAK;AAC3E;;;AD7BA,IAAM,eAAiC;AAAA,EACrC,OAAO,MAAM;AAAA,EACb,SAAS,MAAM;AAAA,EACf,OAAO,MAAM;AAAA,EACb,SAAS,MAAM;AAAA,EACf,OAAO;AACT;AACA,IAAM,cAAc,CAAC,QAAQ,iBAAiB;AAC5C,QAAM,EAAE,OAAO,SAAS,QAAQ,GAAG,OAAO,QAAQ,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,CAAC;AAE5C,YAAU,MAAM;AACd,UAAM,eAAe,MAAM,UAAU,OAAO,OAAO;AACnD,WAAO,iBAAiB,UAAU,YAAY;AAE9C,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,MAAM,OAAO,EAAE,OAAe,CAAC;AAEjD,YAAU,MAAM;AACd,cAAU,UAAU,QAAQ,QAAQ,QAAQ,OAAO,KAAK;AAAA,EAC1D,GAAG,CAAC,SAAS,SAAS,UAAU,QAAQ,UAAU,MAAM,CAAC;AAEzD,YAAU,MAAM;AACd,gBAAY,UAAU,QAAQ,QAAQ,QAAQ,OAAO,OAAO;AAAA,EAC9D,GAAG,CAAC,SAAS,QAAQ,SAAS,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC;AAEzE,YAAU,MAAM;AACd,cAAU,QAAQ,OAAO,KAAK;AAAA,EAChC,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,YAAU,MAAM;AACd,gBAAY,UAAU,QAAQ,QAAQ,QAAQ,OAAO,OAAO;AAAA,EAC9D,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,YAAU,MAAM;AACd,cAAU,QAAQ,SAAS;AAAA,EAC7B,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO,UAAU,QAAQ,UAAU,UAAU,UAAU;AACzD;AAEA,IAAO,sBAAQ;","names":[]}