Add public method reset to force restart pagination

[marlonmleite]

The PR is based on issue #190 and #12

[marlonmleite]

@danbovey

[NurdinDev]

when this update will be available?

[marlonmleite]

@danbovey when will be available?

[Tautorn]

I'm with problem with infinite scroller too. This solution working for me. When will be available?

[marlonmleite]

@danbovey @YIZHUANG let's release?

[simjoeweb]

I need this

[marlonmleite]

Workaround for this bug:

import React, { PureComponent, createRef } from 'react'
import PropTypes from 'prop-types'
import InfiniteScroller from 'react-infinite-scroller'

class InfiniteScroll extends PureComponent {
  ref = createRef()

  scrolltoTop = () => {
    const scroll = this.ref.current.getParentElement(this.ref.current.scrollComponent)
    scroll.scrollTop = 0
  }

  reset() {
    if (this.ref && this.ref.current) {
      this.ref.current.pageLoaded = this.ref.current.props.pageStart

      this.scrolltoTop()
    }
  }

  render() {
    return <InfiniteScroller ref={this.ref} key="scroller" {...this.props} />
  }
}

InfiniteScroll.defaultProps = {
  pageStart: 1
}

InfiniteScroll.propTypes = {
  pageStart: PropTypes.number
}

export default InfiniteScroll

[remuspoienar]

Any updates on this ?

[preservance717]

is it release???

[hendriku]

I also need this. The workaround throws a warning :( most likely because the react-infinite-scroller uses the ref as a prop which is wrong

My personal workaround was, that I built my own page counter as a wrapper and used the loadMore function to increment the page value. This solution is more flexible in terms of resetting and querying APIs.

[azhaorz]

hook + typescript

import React, { forwardRef, ForwardRefRenderFunction, useImperativeHandle, useRef } from "react";
import ReactInfiniteScroll from "react-infinite-scroller";

interface Props {
  element?: string;
  hasMore?: boolean;
  initialLoad?: boolean;
  isReverse?: boolean;
  loadMore(page: number): void;
  pageStart?: number;
  threshold?: number;
  useCapture?: boolean;
  useWindow?: boolean;
  loader?: React.ReactElement;
  getScrollParent?(): HTMLElement | null;
}

const InfiniteScroll: ForwardRefRenderFunction<{ reset: () => void }, Props> = ({ children, ...props }, ref) => {
  const scrollRef = useRef<ReactInfiniteScroll>();

  const scrolltoTop = () => {
    const scroll = scrollRef.current?.getParentElement(scrollRef.current.scrollComponent);
    scroll && (scroll.scrollTop = 0);
  };

  const reset = () => {
    if (scrollRef && scrollRef.current) {
      scrollRef.current.pageLoaded = scrollRef.current.props.pageStart;

      scrolltoTop();
    }
  };

  useImperativeHandle(ref, () => ({
    reset,
  }));

  return (
    <ReactInfiniteScroll ref={scrollRef} {...props}>
      {children}
    </ReactInfiniteScroll>
  );
};

export default forwardRef(InfiniteScroll);