React Show More
Ever need a component which allows you to display a certain number of items in a list, then allow a user to show that many more, over and over, until they reach the end of the list?
@tedconf/react-show-more does just that while giving you complete control of your style by using render props.
install
yarn add @tedconf/react-show-more use
import React from 'react'; import ShowMore from '@tedconf/react-show-more'; const MyLongComponent = ({ listItems }) => ( <ShowMore items={listItems} by={2} > {({ current, onMore, }) => ( <React.Fragment> <ul> {current.map(item => ( <li key={item.id} > {item.label} </li> ))} </ul> <button disabled={!onMore} onClick={() => { if (!!onMore) onMore(); }} > more </button> </React.Fragment> )} </ShowMore> ); render( <MyLongComponent listItems={[ { id: '1', label: 'You can grow new brain cells. Here\'s how', }, { id: '2', label: 'The brain may be able to repair itself — with help', }, { id: '3', label: 'Growing evidence of brain plasticity', }, { id: '4', label: 'One more reason to get a good night\'s sleep', }, ]} />, yourEl, );props
@tedconf/react-show-more takes a few props:
| Required | Prop | Type | Purpose |
|---|---|---|---|
| ✔ | items | Array | the entire list of items you'd like to act on |
| 1 | by | Int | the number of items to show at a time |
| false | replace | Boolean | should it add to the results, or replace them |
| () => {} | onEnd | Function | the function to be called when reaching the end of the list of items |
props passed to the child function
@tedconf/react-show-more provides a function as the child, and that function comes with some useful arguments:
| Prop | Type | Purpose |
|---|---|---|
current | Array | the currently visible results |
by | Int | same number you passed in as by prop |
all | Array | same array you passed in as items prop |
onMore | Function | null | returns either a function that tells the component to update the current prop with the next result or null, which means there are no results left to show |
