react-virtualized-stickylist

1.0.0 • Public • Published

react-virtualized-stickylist

An extension of react-virtualized's List component that adds 'sticky' subheaders in the list.

demo1.gif

See storybook for live demos.

Installation

yarn add react-virtualized-stickylist

Usage

import React from 'react';
import {render} from 'react-dom';
import StickyList from 'react-virtualized-stickylist';

const items = [
    { text: 'apple', group: 'fruits' },
    { text: 'banana', group: 'fruits' },
    { text: 'carrot', group: 'vegetables' },
    // ... etc.
];

const labelRenderer = ({ label, style, key }) => (
    <div
        key={key}
        style={{
            ...style,
            height: 20,
            backgroundColor: 'white',
            lineHeight: `20px`,
        }}
        >
        <b>{label}</b>
    </div>
);

const rowRenderer = ({ index, style, key }) => (
    <div
        key={key}
        style={{
            ...style,
            height: 20,
            backgroundColor: 'white',
            lineHeight: `20px`,
            paddingLeft: 8,
        }}
    >
        {items[index].text}
    </div>
);

render(
    <StickyList
        height={100},
        items={items},
        labelRenderer={labelRenderer},
        rowHeight={20},
        rowRenderer={rowRenderer},
        width={300},
      }}
    />,
    document.getElementById('root')
);

Props

Takes all the props of react-virtualized's [list][List component], as well as the following additional props:

Prop Type Required? Default Description
itemToGroup func item => item && item['group'] A function that converts an item to its group.

Signature
function(item: any) => (group: string | null)
items array [] The items to list.
labelRenderer func A function that renders the label.
Similar to rowRenderer except it is given a label prop instead of an
index prop.

Signature
function({label: string, ...otherProps}) => node
wrapperStyle object {} Extra styling for the wrapper div.

Readme

Keywords

none

Package Sidebar

Install

npm i react-virtualized-stickylist

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

817 kB

Total Files

13

Last publish

Collaborators

  • jf248