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> );