npm package: @rishabhparsediya/react-list
Description: This is react list similar to flatlist in react native
Latest version: 0.1.1

# `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:

```bash
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.**