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

• Here's a CodeSandbox demo
• Here's an Infinite Scroll demo

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