Newborn Programming Monsters
    Wondering what’s next for npm?Check out our public roadmap! »

    react-listview-sticky-header

    0.6.1 • Public • Published

    Join the chat at https://gitter.im/cht8687/react-listview-sticky-header

    React listview with sticky header

    Circle CI NPM Version Coverage Status Build Status Downloads Dependency Status License

    React Listview sticky header

    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 git@github.com: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

    js-standard-style

    Install

    npm i react-listview-sticky-header

    DownloadsWeekly Downloads

    16

    Version

    0.6.1

    License

    MIT

    Unpacked Size

    38 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar
    • avatar