React-List

A react component that renders an array as an html list. The array can consist of primitives or objects. In the case of objects, the formatItem function property can be used to format the item and return either a primitive or object. By default a string is expected. In case of an object, a custom itemComponent is required.

Demo

Install

Install as node dependency:

npm install react-simple-list --save

Usage 1 - Basic Example

var React = require('react');
var list = require('react-simple-list');

React.render(React.createElement(list, {
  items: ['Java', 'Java Flash', 'JavaScript']
}), document.querySelector('#list-1'));

Usage 2 - With object

Note that the value property is used as the label by default. This allows the usage of objects without the help of the item formatter and component.

React.render(React.createElement(list, {
  items: [{
    value: 'Apple'
  }, {
    value: 'Banana'
  }, {
    value: 'Cherry'
  }]
}), document.querySelector('#list-2'));

Usage 3 - With object, item component and formatter

var items = [
  {id: 1, firstname: 'Mike', lastname: 'November'},
  {id: 2, firstname: 'India', lastname: 'Juliet'},
  {id: 3, firstname: 'Alpha', lastname: 'Bravo'}
];

var itemComponent = React.createClass({
  propTypes: {
    href: React.PropTypes.string.isRequired,
    text: React.PropTypes.string.isRequired
  },
  render: function () {
    return (
      React.DOM.a({ href: this.props.href }, this.props.text)
    );
  }
});

function formatItem(item) {
  return {
    href: '#' + item.id,
    text: item.firstname + ' ' + item.lastname
  };
}

React.render(React.createElement(list, {
  items: items,
  formatItem: formatItem,
  itemComponent: itemComponent,
  cssClass: 'list'
}), document.querySelector('#list-2'));

Properties

• items: an array of items, where items can be an arbitrary object
• formatItem: an optional function that is called with each item and used to map the item to the properties of itemComponent
• itemComponent: an optional react class that is used to display an item
• cssClass: optional css class for the list
• onItemClick(event, item, index): optional click handler. The argument contains the value of the clicked item and its index.

List item properties

• cssClass: If an item object contains the property cssClass it will be applied to the rendered <li> element.
• value: If an item object contains the property value, it is used as the item label if no custom itemComponent is given.

Run local demo

npm start & npm run watch

• npm run build - build production css and js
• npm run watch - compile css and js
• npm start - start static dev server

License

MIT