Skip to content

newyork-anthonyng/react-show-more

Repository files navigation

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

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

About

A unopinionated component to handle showing more items

Resources

License

Stars

Watchers

Forks

Packages

No packages published