Skip to content

Latest commit

 

History

History
109 lines (93 loc) · 3.93 KB

README.md

File metadata and controls

109 lines (93 loc) · 3.93 KB

React Show More

Build Status Test Coverage npm license dependencies semantic-release

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.

@tedconf/react-show-more in action

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