react-summary

react-summary

npm i react-summary

Readme

React-Summary

Summaries for react components.

Usage

import Summary from 'react-summary';

class App() {
  showOthers() {
    // others
  }

  render() {
    return (
      <Summary items={['hey', 'foo', 'bar', 'selam']}
               max={2}
               onShowOthers={this.showOthers} />
    )
  }
}

Screenshot

Screenshot

Configuration

The Summary component expects the following props.

ParameterDefault
items[]The collection that will be aggregated
max3Maximum visible item count
textObject. Explained on the following table.Translations of visible texts
preventSingleRemainingfalsePrints the last item instead of and 1 more text
onShowOthersNo-opCallback function for show others link
itemRendererIdentity (returns given parameter)A wrapper function for styling items
blockreact-summaryThe className attribute of component

To styling items, you can provide react components in your collection instead of using itemRenderer.

Translation strings:

ParameterDefault
more'more'
and'and'
none'none'

Contributors (You can add your name here in your pull-request)

Jump To