1.0.2 • Published 9 months ago
ino-listview v1.0.2
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.