• Version 2.2.0
  • Published
  • 117 kB
  • 1 dependency
  • MIT license


npm i react-tiny-virtual-list
yarn add react-tiny-virtual-list
pnpm add react-tiny-virtual-list


A tiny but mighty list virtualization component, with zero dependencies 💪



class VirtualList

class VirtualList extends React.PureComponent<Props, State> {}

    property defaultProps

    static defaultProps: {
    overscanCount: number;
    scrollDirection: DIRECTION;
    width: string;

      property itemSizeGetter

      itemSizeGetter: (itemSize: ItemSize) => (index: any) => any;

        property propTypes

        static propTypes: {
        estimatedItemSize: PropTypes.Requireable<any>;
        height: PropTypes.Validator<any>;
        itemCount: PropTypes.Validator<any>;
        itemSize: PropTypes.Validator<any>;
        onScroll: PropTypes.Requireable<any>;
        onItemsRendered: PropTypes.Requireable<any>;
        overscanCount: PropTypes.Requireable<any>;
        renderItem: PropTypes.Validator<any>;
        scrollOffset: PropTypes.Requireable<any>;
        scrollToIndex: PropTypes.Requireable<any>;
        scrollToAlignment: PropTypes.Requireable<any>;
        scrollDirection: PropTypes.Requireable<any>;
        stickyIndices: PropTypes.Requireable<any>;
        style: PropTypes.Requireable<any>;
        width: PropTypes.Requireable<any>;

          property sizeAndPositionManager

          sizeAndPositionManager: SizeAndPositionManager;

            property state

            readonly state: State;

              method componentDidMount

              componentDidMount: () => void;

                method componentDidUpdate

                componentDidUpdate: (_: Props, prevState: State) => void;

                  method componentWillReceiveProps

                  componentWillReceiveProps: (nextProps: Props) => void;

                    method componentWillUnmount

                    componentWillUnmount: () => void;

                      method getOffsetForIndex

                      getOffsetForIndex: (
                      index: number,
                      scrollToAlignment?: ALIGNMENT | undefined,
                      itemCount?: number
                      ) => number;

                        method recomputeSizes

                        recomputeSizes: (startIndex?: number) => void;

                          method render

                          render: () => JSX.Element;

                            method scrollTo

                            scrollTo: (value: number) => void;


                              interface ItemInfo

                              interface ItemInfo {}

                                property index

                                index: number;

                                  property style

                                  style: ItemStyle;

                                    interface ItemStyle

                                    interface ItemStyle {}

                                      property height

                                      height?: number;

                                        property left

                                        left: number;

                                          property marginBottom

                                          marginBottom?: number;

                                            property marginLeft

                                            marginLeft?: number;

                                              property marginRight

                                              marginRight?: number;

                                                property marginTop

                                                marginTop?: number;

                                                  property position

                                                  position: ItemPosition;

                                                    property top

                                                    top?: number;

                                                      property width

                                                      width: string | number;

                                                        property zIndex

                                                        zIndex?: number;

                                                          interface Props

                                                          interface Props {}

                                                            property className

                                                            className?: string;

                                                              property estimatedItemSize

                                                              estimatedItemSize?: number;

                                                                property height

                                                                height: number | string;

                                                                  property itemCount

                                                                  itemCount: number;

                                                                    property itemSize

                                                                    itemSize: ItemSize;

                                                                      property overscanCount

                                                                      overscanCount?: number;

                                                                        property scrollDirection

                                                                        scrollDirection?: DIRECTION;

                                                                          property scrollOffset

                                                                          scrollOffset?: number;

                                                                            property scrollToAlignment

                                                                            scrollToAlignment?: ALIGNMENT;

                                                                              property scrollToIndex

                                                                              scrollToIndex?: number;

                                                                                property stickyIndices

                                                                                stickyIndices?: number[];

                                                                                  property style

                                                                                  style?: React.CSSProperties;

                                                                                    property width

                                                                                    width?: number | string;

                                                                                      method onItemsRendered

                                                                                      onItemsRendered: ({ startIndex, stopIndex }: RenderedRows) => void;

                                                                                        method onScroll

                                                                                        onScroll: (offset: number, event: UIEvent) => void;

                                                                                          method renderItem

                                                                                          renderItem: (itemInfo: ItemInfo) => React.ReactNode;

                                                                                            interface RenderedRows

                                                                                            interface RenderedRows {}

                                                                                              property startIndex

                                                                                              startIndex: number;

                                                                                                property stopIndex

                                                                                                stopIndex: number;

                                                                                                  interface State

                                                                                                  interface State {}

                                                                                                    property offset

                                                                                                    offset: number;

                                                                                                      property scrollChangeReason

                                                                                                      scrollChangeReason: SCROLL_CHANGE_REASON;


                                                                                                        enum ScrollDirection

                                                                                                        enum ScrollDirection {
                                                                                                        HORIZONTAL = 'horizontal',
                                                                                                        VERTICAL = 'vertical',

                                                                                                          member HORIZONTAL

                                                                                                          HORIZONTAL = 'horizontal'

                                                                                                            member VERTICAL

                                                                                                            VERTICAL = 'vertical'

                                                                                                              Type Aliases

                                                                                                              type ItemPosition

                                                                                                              type ItemPosition = 'absolute' | 'sticky';

                                                                                                                Package Files (2)

                                                                                                                Dependencies (1)

                                                                                                                Dev Dependencies (31)

                                                                                                                Peer Dependencies (1)


                                                                                                                To add a badge like this badgeto your package's README, use the codes available below.

                                                                                                                You may also use to create a custom badge linking to

                                                                                                                • Markdown
                                                                                                                • HTML
                                                                                                                  <a href=""><img src="" alt=""></a>