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.