stickylist v1.1.1

StickyList

React sticky header listview component

• easy to use
• high performance
• scalable and custom styles

Use

1. Install by npm i stickylist
2. Provide data, StickyList will render it:

import StickyList from 'stickylist';

const DATA = [
  {
    header: 'ListA',
    key: 'A',
    items: <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  },
  ...
]

<StickyList data={DATA}/>

Notice that key in data is for improve performance, if not provide will use index as key.

3. instance method scrollTo(index) can used to control StickyList scroll to a group by group index. e.g scroll to top(0) and bottom(data.length-1)

See a live demo and it's source code.

Custom styles

StickyList's HTML struts in className:

.sl-wrap
   .sl-group
       .sl-header
       .sl-items
   .sl-group
       .sl-header
       .sl-items
   ...

You can add style to these className to custom styles, e.g:

.sl-wrap{
  height: 100px;
}
.sl-header {
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}
.sl-item {
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  padding: 5px;
}