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|