React Listing

Simple react listing component.

React listing is component usefull for doing iteration on the array based data and provding custom template for list item.

Checkout the example by running npm start.

Features

• Component for list item.
• Sorting and ordering using lodash.
• Stateless
• Framework Independent (can be used with react or react-redux applications).
• CSS classes.
• Limit
• key property using GUID or using object key name using string input.

Upcoming Features

• Infinite list.
• Datalist from promise.
• Paging
• Filter

Installation

npm install --save react-listing

Usage

Importing

import Listing from 'react-listing';

JSX

<Listing items={listingData} item={listItem}/>

Component Properties

items | Array

List of items.

item | Component

Component for each item in the list

keyName | String

Unique key in data set to help react identify component in the list.

sort | Function

Handler for lodash's sortBy function.

order | Function

Handler for lodash's orderBy function.

limit | Number

Limit the number of items to shown.

itemClassName | String

Classes for a listing item.

isActiveItem | Function

Function to check if the item is active. Function needs return boolean or object with state and class like. { class : "activeClass", isActiveItem : true }