react-listview-sticky-header alternatives and similar libraries
Based on the "Sticky" category.
Alternatively, view react-listview-sticky-header alternatives based on common mentions on social networks and blogs.
-
-
-
react-sticky-state
ReactStickyState makes native position:sticky statefull and polyfills the missing sticky browser feature -
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-listview-sticky-header or a related project?
README
React listview with sticky header
[React Listview sticky header](src/example/react-listview-sticky-header.gif)
Installation
npm
$ npm install --save react-listview-sticky-header
Since React is peer dependency, you need to install it manually if you haven't.
Demo
http://cht8687.github.io/react-listview-sticky-header/example/
Usage
<ReactListView
data={data}
headerAttName="headerName"
itemsAttName="items"
styles={styles}
/>
Options
data: PropTypes.array.isRequired
const DATALIST = [
{
headerName : "ListA",
items : [{
title : "items1"
}, {
title : "items2"
}]
},
{
headerName : "ListB",
items : [{
title : "items1"
}, {
title : "items2"
}]
}
];
headerAttName: PropTypes.string.isRequired
variable name of header in your data object.
In above example, it's headerName.
itemsAttName: PropTypes.string.isRequired
variable name which hold items data in your data object.
In above example, it's items.
styles: PropTypes.object.isRequired
let styles = {
outerDiv: {
height: '420px',
overflowY: 'auto',
outline: '#b9ceb6 dashed 1px',
width: '383px'
},
ul: {
margin: '0px',
listStyleType: 'none',
padding: '0px'
},
fixedPosition: {
position: 'fixed',
width: '383px',
top: '0px'
},
listHeader: {
width: '383px',
height: '27px',
background: '#94D6CF',
color: 'white'
},
listItems: {
color: '#a9adab'
}
}
outerDiv, ul, fixedPosition, listHeader, listItems are required, you can modify the CSS to meet your needs.
Development
$ git clone [email protected]:cht8687/react-listview-sticky-header.git
$ cd react-listview-sticky-header
$ npm install
$ webpack-dev-server
Then
open http://localhost:8080/webpack-dev-server/
License
MIT
*Note that all licence references and agreements mentioned in the react-listview-sticky-header README section above
are relevant to that project's source code only.