1.0.3 • Published 7 years ago
firebase-react-paginated v1.0.3
firebase-react-paginated
Implementing paginated lists when dealing with dynamic content using Firebase can be troublesome. This simple HOC will make dealing with this a breeze for most cases.
Table of Contents
Composing with connect or other HOCs
Getting started
First of all, install the package dependency from npm.
npm -i -s firebase-react-paginated
You can then create your component using any of our props.
// ./components/MyComponent
import React from 'react'
import MyListItem from './MyListItem';
const MyComponent = ({
pageItems,
hasNextPage,
hasPrevPage,
onNextPage,
onPrevPage,
isLoading
}) => (
<div>
{(isLoading) ? (
<p>loading list page…</p>
) : (
<ul>
{pageItems.map((item.id) => (
<li key={item.id}>
<MyListItem itemId={item.id} />
</li>
))}
</ul>
)}
<button disabled={!hasPrevPage} onClick={onPrevPage}>
show previous page
</button>
<button disabled={!hasNextPage} onClick={onNextPage}>
show next page
</button>
</div>
);
export default MyComponent;
Then create your container using withFirebasePagination
.
// ./containers/MyComponent
import React from 'react'
import firebase from 'firebase';
import withFirebasePagination from 'firebase-react-paginated';
import MyComponent from '../components/MyComponent';
firebase.config(/* your firebase config */);
export default withFirebasePagination(firebase)({
path: 'listItems',
orderBy: '.value',
length: 20
})(MyComponent);
Composing with connect or other HOCs
You can compose your component as you would with connect
or any other HOC from recompose
for instance.
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withFirebasePagination } from 'firebase-react-paginated';
import { fetchItem } from './redux/actions';
...
export default compose(
connect(null, { fetchItem }),
withFirebasePagination({
path: 'list',
onNewItem: ({ fetchItem }) => (itemId) => fetchItem(itemId)
})
)(MyComponent);
Configurations
withFirebasePagination(*firebase)(*options)(*WrappedComponent)
*firebase - must be a valid firebase object or a valid firebase reference.
*options - an object as specified below
*WrappedComponent - the component that will receive the list props
Options
prop | value | description |
---|---|---|
path | string | the path to your firebase list. e.g. list . required |
length | number | the number of items per page. defaults to 10 . |
orderBy | string | the prop that will be used for ordering the list. must hold numbered values. defaults to .value . e.g. .value or .priority or propName |
onNewItem | function | a function that is called whenever a new item is added to the list (only once per item id). e.g. (props) => (item) => {...} |
onNewPage | function | a function that is called whenever a new page is rendered (even when calling 'the same page' twice as pages may have changed). e.g. (props) => (pageItems) => {...} |
Passed Props
prop | value | description |
---|---|---|
isLoading | boolean | is true when a new page is loading. |
hasNextPage | boolean | is true when the next page has items. |
hasPrevPage | boolean | is true when the previous page has items. |
onNextPage | function | will render the next page when called. takes no arguments. |
onPrevPage | function | will render the previous page when called. takes no arguments. |
Next Steps
- accept other
orderBy
possibilities - create tests using jest