ino-listview

A customizable ListView component for React applications.

Installation

Install the package using npm:

## Usage

Here's a basic example of how to use the ListView component:

import React from "react";
import { ListView } from "ino-listview";
const data = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];
const MyComponent = () => {
  const renderItem = ({ item, index, isActive }) => (
    <div className={isActive ? "active" : ""}>{item.name}</div>
  );
  return (
    <ListView
      itemsCount={10}
      itemsTotal={data.length}
      itemWidth={10}
      itemHeight={5}
      renderItem={renderItem}
      data={data}
    />
  );
};

Props

The ListView component accepts the following props:

| Prop | Type | Default | Description | | ------------------ | -------------------------- | ------------ | ---------------------------------------------------- | | id | string | - | Unique identifier for the list | | uniqueKey | string | 'list-' | Prefix for item keys | | listType | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the list | | nativeControle | boolean | false | Enable native keyboard control | | debounce | number | 300 | Debounce time for keyboard events (ms) | | itemsCount | number | - | Number of items visible at once | | itemsTotal | number | - | Total number of items in the list | | buffer | number | - | Number of extra items to render for smooth scrolling | | itemWidth | number | - | Width of each item (in rem) | | itemHeight | number | - | Height of each item (in rem) | | isActive | boolean | - | Whether the list is currently active | | initialActiveIndex | number | 0 | Initial active item index | | onBackScrollIndex | number | null | Index to scroll to on 'back' action | | startScrollIndex | number | 0 | Initial scroll position | | direction | 'ltr' | 'rtl' | 'ltr' | Text direction | | onMouseEnter | function | () => {} | Callback when mouse enters an item | | onUp | function | () => {} | Callback for 'up' action | | onDown | function | () => {} | Callback for 'down' action | | onLeft | function | () => {} | Callback for 'left' action | | onRight | function | () => {} | Callback for 'right' action | | onBack | function | () => {} | Callback for 'back' action | | renderItem | function | - | Function to render each item | | data | array | - | Array of data to render |

Customization

You can customize the appearance of the ListView by styling the following classes:

• .scroll-view-parent: The parent container of the list
• .scroll-view: The scrollable container
• .list-view: Applied to horizontal lists

License

This project is licensed under the MIT License.