- Max Rows with Overflow Placement
-
- When using maxRows greater than 1, the overflow element can be placed in different positions within
- the grid layout.
-
-
-
- {` \`Item \${i + 1}\`)}
- renderItem={(item) => {item}}
- maxRows={3}
- style={{ gap: "8px" }}
-/>`}
-
-
-
- `Item ${i + 1}`)}
- renderItem={(item) => {item}}
- maxRows={3}
- style={{ gap: "8px" }}
- />
-
-
- Behavior: With maxRows={3}, the component creates a 3-row grid layout. When items
- exceed the available space, the overflow element appears in the last available position, maintaining the grid
- structure.
-
-
- );
-}
diff --git a/demo/src/examples/ReverseOrderExample.tsx b/demo/src/examples/ReverseOrderExample.tsx
new file mode 100644
index 0000000..8f7371b
--- /dev/null
+++ b/demo/src/examples/ReverseOrderExample.tsx
@@ -0,0 +1,77 @@
+import { OverflowList } from "react-responsive-overflow-list";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+const tags = ["React", "TypeScript", "CSS", "JavaScript", "HTML", "Node.js", "Express", "MongoDB", "PostgreSQL", "Redis"];
+
+export function ReverseOrderExample() {
+ return (
+
+ Reverse Order Example
+ Compare normal overflow (shrinks from end) vs reverse overflow (shrinks from start)
+
+
+ {`// Normal overflow - shrinks from end
+ (
+
+ {item}
+
+ )}
+ style={{ gap: "8px" }}
+/>
+
+// Reverse overflow - shrinks from start
+ (
+
+ {item}
+
+ )}
+ style={{
+ gap: "8px",
+ flexDirection: "row-reverse",
+ justifyContent: "flex-end"
+ }}
+/>`}
+
+
+
+
+
Normal Overflow (shrinks from end)
+
+ (
+
+ {item}
+
+ )}
+ style={{ gap: "8px" }}
+ />
+
+
+
Reverse Overflow (shrinks from start)
+
+ (
+
+ {item}
+
+ )}
+ style={{
+ gap: "8px",
+ flexDirection: "row-reverse",
+ justifyContent: "flex-end"
+ }}
+ />
+
+