@evo/fetch-list

0.1.1 • Public • Published

FetchList

Компонент используется как список с догружаемыми элементами.

Dependencies

  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react-visibility-sensor": "^5.1.0"
  }

Usage

import FetchList from '@evo/fetch-list';

const Example = () => (
    const [fetchLoading, setFetchLoading] = useState(false);
    
    const handleLoadMore = () => {
        ...
    }

    <div className={css.root}>
        <FetchList
            isLoading={fetchLoading}
            onFetch={handleLoadMore}
        >
            {list.map((item, index) => (
                <li
                    key={item}
                    className={css.item}
                >
                    {item}
                </li>
            ));
        </FetchList>
);

API

FetchList.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    offset: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.shape({
            top: PropTypes.number,
            right: PropTypes.number,
            bottom: PropTypes.number,
            left: PropTypes.number
        })
    ]),
    loadingComponent: PropTypes.func,
    moreComponent: PropTypes.func,
    lazyLoadEnable: PropTypes.bool,
    showMoreEnable: PropTypes.bool,
    isLoading: PropTypes.bool,
    onFetch: PropTypes.func,
};

Default значения

FetchList.defaultProps = {
    offset: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },
    lazyLoadEnable: true,
    showMoreEnable: true,
};

children

Можно передавать непосредственно .map элементов, либо компонент в котором будет происходить .map Главное учитывать, что все элементы попадут в тег

    , потому должны быть в теге
  •     <FetchList>
            {list.map((item, index) => (
                <li key={item}>{item}</li>
            ));
        </FetchList>
    );
        <FetchList>
            <List items={items} />
        </FetchList>
    );

    className (string)

    Передает класс для списка

      .

      showMoreEnable (bool)

      Если больше нет возможности догружать элементы в список стоит указать значение showMoreEnable: false При этом не будет срабатывать дозагрузка при скроле и будет скрыт элемент moreComponent

      lazyLoadEnable (bool)

      Если нужно отключить дозагрузку э лементов при скроле, а оставить только нажатие на кнопку стоит указать значение lazyLoadEnable: false

      offset

      По умолчанию значение 0. Это означает что событие onFetch произойдет в момент, когда элемент moreComponent пересечет любым своим краем границы viewport. Можно указать значение с типом number - offset={-100}, в таком случае для всех сторон будет увеличена зона viewport на 100 пикселей, тоесть событие произойдет раньше появления элемента во viwport, в тот момент когда к нему останется < 100 пикселей. Также можно значением offset указывать объект с нужными нам ключами top, right, bottom, left. Например offset={{ bottom: -200 }}. В таком случае, при скроле страницы вниз событие onFetch произойдет на "200 пикселей" раньше, чем moreComponent станет видимым.

      onFetch (func)

      Событие, которое произойдет при появлении во viewport с учетом указанных значений offset

      isLoading (bool)

      После вызова события onFetch, которое инициализирует дозагрузку, нужно менять состояние isLoading на true. И возвращать isLoading={false} после окончания дозагрузки. При положительном значении повторно не будет срабатывать событие при появлении moreComponent во viewport и при указанном loadingComponent он будет отображен.

      moreComponent (func)

      Функция рендера контента под списком

        который может содержать в себе кнопку для загрузки при нажатии. При указанном moreComponent и активном lazyLoadEnable дозагрузка бует происходить при попадании именно этого контента во viewport. Если moreComponent не указан, дозагрузку будет происходить при попадании во viewport нижней границы списка
        <FetchList
            isLoading={loading}
            moreComponent={() => (
                <div style={{ textAlign: 'center' }}>
                    <span onClick={!loading ? () => handleLoadMore : null}>
                        {loading ? 'загрузка' : 'показать еще'}
                    </span>
                </div>
            )}
            onFetch={handleLoadMore}
        >
            ...
        </FetchList>
    );

    loadingComponent (func)

    Функция рендера контента во время ожидания дозагрузки. Можно использовать свой sceleton или spinner

        <FetchList
            loadingComponent={() => <Spinner />}
        >
            ...
        </FetchList>
    );

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.11latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.11

Package Sidebar

Install

npm i @evo/fetch-list

Weekly Downloads

1

Version

0.1.1

License

ISC

Unpacked Size

21.9 kB

Total Files

5

Last publish

Collaborators

  • stoyanovk
  • lequan
  • zemlanin
  • alexander
  • seedofjoy
  • 041616
  • docccdev
  • orhideous
  • tailhook
  • hunson.abadeer
  • mark_tven
  • amostovenko
  • sadkovoy
  • himiranov
  • evo-kazymyrov