@jswork/react-list

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

1. 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: ()

1. 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.