@os-design/use-load-next 1.0.37 → 1.0.39

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_useSize","_react","obj","__esModule","getElement","el","Element","current","useLoadNext","paginationProps","options","arguments","length","undefined","hasNext","isLoadingNext","loadNext","_options$count","count","_options$threshold","threshold","container","size","useSize","getScrollHeight","useCallback","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","useEvent","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n  hasNext: boolean;\n  isLoadingNext: boolean;\n  loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n  count?: number;\n  threshold?: number;\n  container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n  el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n  paginationProps: PaginationProps,\n  options: Options = {}\n): void => {\n  const { hasNext, isLoadingNext, loadNext } = paginationProps;\n  const { count = 60, threshold = 500, container } = options;\n\n  const size = useSize(container);\n\n  const getScrollHeight = useCallback(() => {\n    if (!container) return document.body.scrollHeight;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollHeight;\n  }, [container]);\n\n  const getScrollTop = useCallback(() => {\n    if (!container) return window.pageYOffset;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollTop;\n  }, [container]);\n\n  const scrollListener = useCallback(() => {\n    const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n    if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n      loadNext(count);\n    }\n  }, [\n    getScrollHeight,\n    getScrollTop,\n    size.height,\n    threshold,\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count,\n  ]);\n\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as never),\n    'scroll',\n    scrollListener\n  );\n};\n\nexport default useLoadNext;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA+C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAgB/C,IAAME,UAAU,GAAG,SAAbA,UAAUA,CAAIC,EAAgC;EAAA,OAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAAA;AAEzC,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CACfC,eAAgC,EAEvB;EAAA,IADTC,OAAgB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAErB,IAAQG,OAAO,GAA8BL,eAAe,CAApDK,OAAO;IAAEC,aAAa,GAAeN,eAAe,CAA3CM,aAAa;IAAEC,QAAQ,GAAKP,eAAe,CAA5BO,QAAQ;EACxC,IAAAC,cAAA,GAAmDP,OAAO,CAAlDQ,KAAK;IAALA,KAAK,GAAAD,cAAA,cAAG,EAAE,GAAAA,cAAA;IAAAE,kBAAA,GAAiCT,OAAO,CAAtCU,SAAS;IAATA,SAAS,GAAAD,kBAAA,cAAG,GAAG,GAAAA,kBAAA;IAAEE,SAAS,GAAKX,OAAO,CAArBW,SAAS;EAE9C,IAAMC,IAAI,GAAG,IAAAC,mBAAO,EAACF,SAAS,CAAC;EAE/B,IAAMG,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACxC,IAAI,CAACJ,SAAS,EAAE,OAAOK,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,IAAMC,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACP,SAAS,CAAC,CAAC;EAEf,IAAMS,YAAY,GAAG,IAAAL,kBAAW,EAAC,YAAM;IACrC,IAAI,CAACJ,SAAS,EAAE,OAAOU,MAAM,CAACC,WAAW;IACzC,IAAMH,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,IAAMa,cAAc,GAAG,IAAAT,kBAAW,EAAC,YAAM;IACvC,IAAMU,sBAAsB,GAAGX,eAAe,CAAC,CAAC,GAAGF,IAAI,CAACc,MAAM,GAAGhB,SAAS;IAC1E,IAAIU,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIrB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACE,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDM,eAAe,EACfM,YAAY,EACZR,IAAI,CAACc,MAAM,EACXhB,SAAS,EACTN,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRE,KAAK,CACN,CAAC;EAEF,IAAAmB,oBAAQ,EACNhB,SAAS,KACL,OAAOU,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGlB,SAAS,CAAW,EACjE,QAAQ,EACRqB,cACF,CAAC;AACH,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,cAEa/B,WAAW"}
+{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_useSize","_react","obj","__esModule","getElement","el","Element","current","useLoadNext","paginationProps","options","arguments","length","undefined","hasNext","isLoadingNext","loadNext","_options$count","count","_options$threshold","threshold","container","size","useSize","getScrollHeight","useCallback","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","useEvent","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n  hasNext: boolean;\n  isLoadingNext: boolean;\n  loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n  count?: number;\n  threshold?: number;\n  container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n  el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n  paginationProps: PaginationProps,\n  options: Options = {}\n): void => {\n  const { hasNext, isLoadingNext, loadNext } = paginationProps;\n  const { count = 60, threshold = 500, container } = options;\n\n  const size = useSize(container);\n\n  const getScrollHeight = useCallback(() => {\n    if (!container) return document.body.scrollHeight;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollHeight;\n  }, [container]);\n\n  const getScrollTop = useCallback(() => {\n    if (!container) return window.pageYOffset;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollTop;\n  }, [container]);\n\n  const scrollListener = useCallback(() => {\n    const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n    if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n      loadNext(count);\n    }\n  }, [\n    getScrollHeight,\n    getScrollTop,\n    size.height,\n    threshold,\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count,\n  ]);\n\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as never),\n    'scroll',\n    scrollListener\n  );\n};\n\nexport default useLoadNext;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA+C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAgB/C,IAAME,UAAU,GAAG,SAAbA,UAAUA,CAAIC,EAAgC;EAAA,OAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAAA;AAEzC,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CACfC,eAAgC,EAEvB;EAAA,IADTC,OAAgB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAErB,IAAQG,OAAO,GAA8BL,eAAe,CAApDK,OAAO;IAAEC,aAAa,GAAeN,eAAe,CAA3CM,aAAa;IAAEC,QAAQ,GAAKP,eAAe,CAA5BO,QAAQ;EACxC,IAAAC,cAAA,GAAmDP,OAAO,CAAlDQ,KAAK;IAALA,KAAK,GAAAD,cAAA,cAAG,EAAE,GAAAA,cAAA;IAAAE,kBAAA,GAAiCT,OAAO,CAAtCU,SAAS;IAATA,SAAS,GAAAD,kBAAA,cAAG,GAAG,GAAAA,kBAAA;IAAEE,SAAS,GAAKX,OAAO,CAArBW,SAAS;EAE9C,IAAMC,IAAI,GAAG,IAAAC,mBAAO,EAACF,SAAS,CAAC;EAE/B,IAAMG,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACxC,IAAI,CAACJ,SAAS,EAAE,OAAOK,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,IAAMC,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACP,SAAS,CAAC,CAAC;EAEf,IAAMS,YAAY,GAAG,IAAAL,kBAAW,EAAC,YAAM;IACrC,IAAI,CAACJ,SAAS,EAAE,OAAOU,MAAM,CAACC,WAAW;IACzC,IAAMH,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,IAAMa,cAAc,GAAG,IAAAT,kBAAW,EAAC,YAAM;IACvC,IAAMU,sBAAsB,GAAGX,eAAe,CAAC,CAAC,GAAGF,IAAI,CAACc,MAAM,GAAGhB,SAAS;IAC1E,IAAIU,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIrB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACE,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDM,eAAe,EACfM,YAAY,EACZR,IAAI,CAACc,MAAM,EACXhB,SAAS,EACTN,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRE,KAAK,CACN,CAAC;EAEF,IAAAmB,oBAAQ,EACNhB,SAAS,KACL,OAAOU,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGlB,SAAS,CAAW,EACjE,QAAQ,EACRqB,cACF,CAAC;AACH,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,cAEa/B,WAAW","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEvent","useSize","useCallback","getElement","el","Element","current","useLoadNext","paginationProps","options","hasNext","isLoadingNext","loadNext","count","threshold","container","size","getScrollHeight","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n  hasNext: boolean;\n  isLoadingNext: boolean;\n  loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n  count?: number;\n  threshold?: number;\n  container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n  el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n  paginationProps: PaginationProps,\n  options: Options = {}\n): void => {\n  const { hasNext, isLoadingNext, loadNext } = paginationProps;\n  const { count = 60, threshold = 500, container } = options;\n\n  const size = useSize(container);\n\n  const getScrollHeight = useCallback(() => {\n    if (!container) return document.body.scrollHeight;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollHeight;\n  }, [container]);\n\n  const getScrollTop = useCallback(() => {\n    if (!container) return window.pageYOffset;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollTop;\n  }, [container]);\n\n  const scrollListener = useCallback(() => {\n    const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n    if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n      loadNext(count);\n    }\n  }, [\n    getScrollHeight,\n    getScrollTop,\n    size.height,\n    threshold,\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count,\n  ]);\n\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as never),\n    'scroll',\n    scrollListener\n  );\n};\n\nexport default useLoadNext;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,OAAO,MAAM,qBAAqB;AACzC,SAAoBC,WAAW,QAAQ,OAAO;AAgB9C,MAAMC,UAAU,GAAIC,EAAgC,IAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAEzC,MAAMC,WAAW,GAAGA,CAClBC,eAAgC,EAChCC,OAAgB,GAAG,CAAC,CAAC,KACZ;EACT,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAGJ,eAAe;EAC5D,MAAM;IAAEK,KAAK,GAAG,EAAE;IAAEC,SAAS,GAAG,GAAG;IAAEC;EAAU,CAAC,GAAGN,OAAO;EAE1D,MAAMO,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAE/B,MAAME,eAAe,GAAGf,WAAW,CAAC,MAAM;IACxC,IAAI,CAACa,SAAS,EAAE,OAAOG,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,MAAMC,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EAEf,MAAMO,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACrC,IAAI,CAACa,SAAS,EAAE,OAAOQ,MAAM,CAACC,WAAW;IACzC,MAAMH,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,MAAMyB,sBAAsB,GAAGV,eAAe,CAAC,CAAC,GAAGD,IAAI,CAACY,MAAM,GAAGd,SAAS;IAC1E,IAAIQ,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIjB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACC,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDI,eAAe,EACfK,YAAY,EACZN,IAAI,CAACY,MAAM,EACXd,SAAS,EACTJ,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRC,KAAK,CACN,CAAC;EAEFb,QAAQ,CACNe,SAAS,KACL,OAAOQ,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGM,SAAS,CAAW,EACjE,QAAQ,EACRH,cACF,CAAC;AACH,CAAC;AAED,eAAenB,WAAW"}
+{"version":3,"file":"index.js","names":["useEvent","useSize","useCallback","getElement","el","Element","current","useLoadNext","paginationProps","options","hasNext","isLoadingNext","loadNext","count","threshold","container","size","getScrollHeight","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n  hasNext: boolean;\n  isLoadingNext: boolean;\n  loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n  count?: number;\n  threshold?: number;\n  container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n  el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n  paginationProps: PaginationProps,\n  options: Options = {}\n): void => {\n  const { hasNext, isLoadingNext, loadNext } = paginationProps;\n  const { count = 60, threshold = 500, container } = options;\n\n  const size = useSize(container);\n\n  const getScrollHeight = useCallback(() => {\n    if (!container) return document.body.scrollHeight;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollHeight;\n  }, [container]);\n\n  const getScrollTop = useCallback(() => {\n    if (!container) return window.pageYOffset;\n    const containerElement = getElement(container);\n    if (!containerElement) return 0;\n    return containerElement.scrollTop;\n  }, [container]);\n\n  const scrollListener = useCallback(() => {\n    const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n    if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n      loadNext(count);\n    }\n  }, [\n    getScrollHeight,\n    getScrollTop,\n    size.height,\n    threshold,\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count,\n  ]);\n\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as never),\n    'scroll',\n    scrollListener\n  );\n};\n\nexport default useLoadNext;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,OAAO,MAAM,qBAAqB;AACzC,SAAoBC,WAAW,QAAQ,OAAO;AAgB9C,MAAMC,UAAU,GAAIC,EAAgC,IAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAEzC,MAAMC,WAAW,GAAGA,CAClBC,eAAgC,EAChCC,OAAgB,GAAG,CAAC,CAAC,KACZ;EACT,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAGJ,eAAe;EAC5D,MAAM;IAAEK,KAAK,GAAG,EAAE;IAAEC,SAAS,GAAG,GAAG;IAAEC;EAAU,CAAC,GAAGN,OAAO;EAE1D,MAAMO,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAE/B,MAAME,eAAe,GAAGf,WAAW,CAAC,MAAM;IACxC,IAAI,CAACa,SAAS,EAAE,OAAOG,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,MAAMC,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EAEf,MAAMO,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACrC,IAAI,CAACa,SAAS,EAAE,OAAOQ,MAAM,CAACC,WAAW;IACzC,MAAMH,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,MAAMyB,sBAAsB,GAAGV,eAAe,CAAC,CAAC,GAAGD,IAAI,CAACY,MAAM,GAAGd,SAAS;IAC1E,IAAIQ,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIjB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACC,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDI,eAAe,EACfK,YAAY,EACZN,IAAI,CAACY,MAAM,EACXd,SAAS,EACTJ,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRC,KAAK,CACN,CAAC;EAEFb,QAAQ,CACNe,SAAS,KACL,OAAOQ,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGM,SAAS,CAAW,EACjE,QAAQ,EACRH,cACF,CAAC;AACH,CAAC;AAED,eAAenB,WAAW","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-load-next",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,19 +30,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.19",
-    "@os-design/use-size": "^1.0.20"
+    "@os-design/use-event": "^1.0.20",
+    "@os-design/use-size": "^1.0.21"
   },
   "devDependencies": {
-    "@types/react-relay": "^16.0.5",
-    "react": "^18.2.0",
-    "react-relay": "^16.1.0",
-    "relay-runtime": "^16.1.0"
+    "@types/react-relay": "^16.0.6",
+    "react": "^18.3.1",
+    "react-relay": "^16.2.0",
+    "relay-runtime": "^16.2.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-relay": ">=13",
     "relay-runtime": ">=13"
   },
-  "gitHead": "60a50e7c10af17bd9da35a631e74cc3df33d3e7b"
+  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
 }

package/src/index.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Utils/useLoadNext' />
+
+# useLoadNext
+
+The React hook that performs pagination in Relay.
+
+The `usePaginationFragment` provides you the `loadNext` function that you need to call when the user scrolls to the end of the page.
+The `useLoadNext` hook allows you to do this in the simplest way possible.
+
+## Example of usage
+
+Get props from `usePaginationFragment` and pass it to the `useLoadNext` hook as follows:
+
+```ts
+const { data, ...paginationProps } = usePaginationFragment(
+  videosFragment,
+  props.videos
+);
+
+useLoadNext(paginationProps);
+```
+
+You can load the specified number of items on the next page by passing the `count` parameter.
+By default, the `count` parameter equals 60.
+
+```ts
+useLoadNext(paginationProps, { count: 10 });
+```
+
+Also, you can load the next page before the user reaches the threshold (in px) to the end of the page.
+By default, the `threshold` parameter equals 500.
+
+```ts
+useLoadNext(paginationProps, { threshold: 1000 });
+```