1.0.3 • Published 5 years ago
derp-list v1.0.3
derp-list 🤓🦄
A React library for rendering a list of data like Google search results.
Installation
npm install derp-list --save
or install with Yarn if you prefer:
yarn add derp-list
Usage
getRandomPosts = async ({ page }: { page: number } = {}) => {
const query = { page: page || 1 };
const randomPosts = await getExamplePosts(query);
return { items: randomPosts.data, pageCount: randomPosts.total_pages };
};
export default () => (
<Fragment>
<h1>
Derp list demo
<br />
<a href="https://shooting-unicorns.com">
A Google like data list!
<span role="img" aria-label="shooting unicorns">
🦄
</span>
</a>
</h1>
<DerpList
contextKey="items"
dataRenderer={({ isLoading, items }) => (
<Fragment>
{isLoading && items.length === 0 && <div>loading</div>}
{items.map((item, index) => (
/* eslint-disable react/no-array-index-key */
<div key={index}>{item.name}</div>
))}
</Fragment>
)}
emptyRenderer={() => <div>No items...</div>}
errorRenderer={({ error }) => <div>The following error has occured: {error}</div>}
loadData={this.getRandomPosts}
loadMoreRenderer={({ isLoading, loadMore }) => (
<Fragment>
{isLoading && <div>loading...</div>}
<button onClick={loadMore}>More results</button>
</Fragment>
)}
/>
</Fragment>
);
contextKey
string
DerpList uses ReactLoads which offers an unique identifier for caching responses. If the contextKey
changes, then data will be fetched again.
children
Render Props
loadMoreRenderer
any
Returns isLoading
when data is fetching and loadMore
function to fetch more data from your paginated request.
dataRenderer
any
Returns isLoading
when data is fetching and items
when a response is received.
emptyRenderer
any
Renders when no data is fetched.
errorRenderer
any
Renders when an error has occured.