Native scroller component for react.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
config
dist
src
.babelrc
.editorconfig
.gitignore
.npmignore
LICENSE
README.md
_README.md
index.html
package.json
yarn.lock

README.md

react-infinite-scroller

Native scroller component for react

properties:

  static propTypes = {
    className: PropTypes.string,
    distance: PropTypes.number,
    value: PropTypes.oneOf(STATUS_LIST),
    onChange: PropTypes.func
  };

  static defaultProps = {
    distance: 60,
    value: 'loaded',
    onChange: noop
  };
  

install && import:

npm install --save afeiship/react-infinite-scroller --registry=https://registry.npm.taobao.org
import ReactInfiniteScroller from 'react-infinite-scroller';
// customize your styles:
$react-infinite-scroller-options:(
);

@import 'node_modules/react-infinite-scroller/dist/style.scss';

usage:

// install: npm install afeiship/react-infinite-scroller --save
// import : import ReactInfiniteScroller from 'react-infinite-scroller'

class App extends React.Component {
  state = {
    value: 'loaded',
    items: []
  };

  constructor(props) {
    super(props);
    window.demo = this;
    window.refs = this.refs;
    window.rc = this.refs.rc;
    this._timer = null;
  }

  loadData() {
    return new Promise((resolve) => {
      let items = [];
      for (let index = 0; index < 20; index++) {
        items.push({
          id: index + 1,
          text: 'text-value' + (index + 1)
        });
      };
      resolve(items);
    })
  }

  componentDidMount() {
    this.loadData().then(items => {
      this.setState({ items });
    })
  }

  _onChange = inEvent => {
    let { items } = this.state;
    if (items.length <= 80) {
      this.setState({ value: 'loading' }, () => {
        this.loadData().then(response => {
          items = items.concat(response);
          this.setState({ items, value: 'loaded' });
        });
      });
    } else {
      this.setState({ value: 'complete' });
    }
  };

  render() {
    const { value, items } = this.state;
    return (
      <div className="hello-react-infinite-scroller">
        <ReactInfiniteScroller value={value} onChange={this._onChange} data-length={items.length}>
          {
            items.map((item, index) => {
              return (
                <div className="item" key={index}>
                  {item.text}
                </div>
              )
            })
          }
        </ReactInfiniteScroller>
      </div>
    );
  }
}