Package Exports

@jswork/react-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jswork/react-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-list

A list component.

installation

npm install -S @jswork/react-list

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
virtual	bool	false	-	If node name is React.Framgment.
nodeName	any	false	'div'	Use customize node name(tagName or ReactElement).
items	array	false	[]	List data source.
sizeKey	string	false	'length'	The collection size key.
allowEmpty	bool	false	false	The default allow empty element is null.
template	func	false	noop	List item template.

usage

import css

@import "~@jswork/react-list/dist/style.css";

// or use sass
@import "~@jswork/react-list/dist/style.scss";

// customize your styles:
$react-list-options: ()

import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactList from '@jswork/react-list';
import './assets/style.scss';

class App extends React.Component {
  state = {
    items: require('./assets/data.json')
  };

  template = ({ item }) => {
    return (
      <div key={item.domId} className="is-item">
        {item.name}
      </div>
    );
  };

  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-list">
        <ReactList items={this.state.items} template={this.template} />
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

https://afeiship.github.io/react-list/

license

Code released under the MIT license.