react sticky header listview component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.editorconfig
.gitignore
README.md
package.json
stickylist.gif
webpack-dist.config.js
webpack.config.js

README.md

Npm Package Npm Downloads Dependency Status

StickyList

redemo

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.

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