react-flatlist

A flexible and customizable React component for rendering lists with efficient infinite scrolling support. This component provides a highly performant and easy-to-use flat list with features like custom item rendering, infinite scrolling, and customizable styles.

Features

• Customizable Item Rendering: Render items however you like using the renderItem function.
• Efficient Infinite Scrolling: Automatically triggers onEndReached when the user scrolls near the bottom of the list.
• Empty State Support: Show a custom component when the list is empty.
• Customizable Styles: Easily customize the styles of the container and list items with the containerStyle and itemStyle props.
• TypeScript Support: Fully typed with TypeScript for better development experience and type safety.

Installation

To install the package, use npm or yarn:

npm install react-flatlist
# or
yarn add react-flatlist

Usage

Example:

import React, { useState, useEffect } from "react";
import FlatList from "react-flatlist";

const MyList = () => {
  const [data, setData] = useState<number[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setIsLoading(true);
    const newData = Array.from({ length: 20 }, (_, i) => i + data.length);
    setData((prevData) => [...prevData, ...newData]);
    setIsLoading(false);
  };

  const renderItem = ({ item }: { item: number }) => (
    <div>{`Item #${item}`}</div>
  );

  const keyExtractor = (item: number) => item.toString();

  const handleEndReached = () => {
    if (!isLoading) {
      loadData();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.8}
      listEmptyComponent={<div>No items available</div>}
    />
  );
};

export default MyList;

Props

| Prop | Type | Description | | ----------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------- | | data | T[] | The array of items to render in the list. | | renderItem | (item: { item: T; index: number }) => ReactNode | Function to render each item. Takes an object with the item and its index. | | keyExtractor | (item: T, index: number) => string | Function to extract a unique key for each item. | | onEndReached | () => void | Callback function triggered when the user reaches the end of the list. | | onEndReachedThreshold | number (default: 0.8) | The threshold percentage of the list's visible height before onEndReached is called. | | containerStyle | CSSProperties | Custom styles for the container of the list. | | itemStyle | CSSProperties | Custom styles for each individual list item. | | listEmptyComponent | ReactNode | Component to render when the list is empty. |

Styling

• You can use the containerStyle and itemStyle props to style the list container and individual items. The styles are passed as inline CSS properties.

• Infinite Scrolling

• The component supports infinite scrolling through the onEndReached prop. By default, the callback is triggered when 80% of the list is visible (onEndReachedThreshold is set to 0.8), but you can adjust the threshold as needed.

• Custom Empty State

• You can display a custom component when the list is empty by passing the listEmptyComponent prop. This allows you to show a user-friendly message or component when there are no items in the list.