1.0.3 • Published 9 months ago
ino-gridview v1.0.3
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.