diff --git a/README.md b/README.md index 12f3685..1449e0c 100644 --- a/README.md +++ b/README.md @@ -383,6 +383,13 @@ A lower value results in more frequent updates, offering smoother visual updates false Defines the base unit height for items within the grid. This value serves as a foundational measure to determine the actual height of each grid item. The item's final height is calculated by multiplying this base unit height (itemUnitHeight) by the item's heightRatio, allowing for proportional scaling of items based on their content or design requirements. While widthRatio affects the item's width in relation to the column width, itemUnitHeight and heightRatio together define the item's vertical dimension, enabling dynamic grid layouts that adapt seamlessly to varying content sizes. + + direction + string + ltr + false + Determines the direction for arranging grid items in the layout: left-to-right (ltr) or right-to-left (rtl). + virtualization Boolean diff --git a/src/responsive-grid/index.tsx b/src/responsive-grid/index.tsx index 1beb781..d0b1607 100644 --- a/src/responsive-grid/index.tsx +++ b/src/responsive-grid/index.tsx @@ -26,6 +26,7 @@ export const ResponsiveGrid: React.FC = ({ keyExtractor = (_, index) => String(index), // default to item index if no keyExtractor is provided HeaderComponent = null, FooterComponent = null, + direction = 'ltr', }) => { const [visibleItems, setVisibleItems] = useState([]); @@ -120,6 +121,20 @@ export const ResponsiveGrid: React.FC = ({ onEndReachedCalled.current = false; }, [gridItems, containerSize, virtualization]); + const getItemPositionStyle = (item: TileItem) => { + const baseStyle = { + position: 'absolute' as const, + top: item.top, + width: item.width, + height: item.height, + }; + + return { + ...baseStyle, + ...(direction === 'rtl' ? { right: item.left } : { left: item.left }), + }; + }; + return ( = ({ {renderedItems.map((item, index) => ( {renderItem({ item, index })} diff --git a/src/responsive-grid/types.ts b/src/responsive-grid/types.ts index 9578d18..9e91806 100644 --- a/src/responsive-grid/types.ts +++ b/src/responsive-grid/types.ts @@ -68,6 +68,12 @@ export interface ResponsiveGridProps { | React.ReactElement> | null | undefined; + + /** + * Determines the direction for arranging grid items in the layout: left-to-right (ltr) or right-to-left (rtl). + * @default ltr + */ + direction?: 'rtl' | 'ltr'; } export interface TileItem {