ino-gridview

A customizable GridView component for React applications.

Installation

Install the package using npm:

## Usage

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

import React from "react";
import GridView from "ino-gridview";
const MyComponent = () => {
  const renderItem = ({ item, index, isActive }) => (
    <div className={isActive ? "active" : ""}>{item.title}</div>
  );
  return (
    <GridView
      id="my-grid"
      rowItemsCount={5}
      rowCount={4}
      itemsTotal={100}
      itemWidth={10}
      itemHeight={5}
      isActive={true}
      renderItem={renderItem}
      data={/ Your data array /}
    />
  );
};
export default MyComponent;

Props

The GridView component accepts the following props: I understand. Thank you for providing that example. I'll create a similar table for your GridView component based on the props you've specified earlier. Here's how it should look:

The GridView component accepts the following props:

Prop	Type	Default	Description
id	string	-	Unique identifier for the GridView
uniqueKey	string	'list-'	Prefix for item keys
nativeControle	boolean	false	Enable native keyboard control
debounce	number	300	Debounce time for keyboard events (ms)
scrollOffset	number	0	Vertical scroll offset
rowItemsCount	number	-	Number of items per row
rowCount	number	-	Number of rows to display
bufferStart	number	0	Number of buffer rows at the start
bufferEnd	number	0	Number of buffer rows at the end
itemsTotal	number	-	Total number of items
itemWidth	number	-	Width of each item (in rem)
itemHeight	number	-	Height of each item (in rem)
isActive	boolean	-	Whether the GridView is currently active
initialActiveIndex	number	0	Initial active item index
direction	'ltr' | 'rtl'	'ltr'	Text direction
onMouseEnter	function	() => {}	Callback when mouse enters an item
onChangeRow	function	() => {}	Callback when active row changes
onUp	function	() => {}	Callback for up navigation
onDown	function	() => {}	Callback for down navigation
onLeft	function	() => {}	Callback for left navigation
onRight	function	() => {}	Callback for right navigation
onBack	function	() => {}	Callback for back action
renderItem	function	-	Function to render each item
data	array	-	Array of data items to render

Development

To build the package:

## License

This project is licensed under the MIT License.