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

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	Array	should it add to the results, or replace them

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