Prompt Details
Model
(gemini-3.5-flash)
Token size
342
Example input
[VARIABLE_FETCH_FUNCTION]: api.getProducts({ page })
[VARIABLE_ITEM_COMPONENT]: <ProductCard product="{item}"/>
[VARIABLE_CONTAINER_STYLES]: "grid grid-cols-2 md:grid-cols-4 gap-6"
Example output
<InfiniteList<Product>
fetchData={(page) => api.getProducts({ page, limit: 20 })}
renderItem={(product) => (
<div className="border rounded shadow p-4 hover:shadow-lg transition">
<img src={product.image} alt={product.name} />
<h3 className="font-bold">{product.name}</h3>
<p>${product.price}</p>
</div>
)}
className="grid grid-cols-2 md:grid-cols-4 gap-6 p-4"
renderEmpty={() => <p>No hay productos disponibles.</p>}
/>
By purchasing this prompt, you agree to our terms of service
GEMINI-3.5-FLASH
Generate high-performance, accessible infinite scroll components for React applications with a single click.
Key features:
Built with React, TypeScript, and Tailwind CSS.
Uses Intersection Observer for maximum performance (no lag).
Fully responsive and touch-friendly.
Includes WAI-ARIA best practices for accessibility.
Zero dependencies (lightweight).
Perfect for developers looking to save hours of manual setup and ensure clean, maintainable, and production-ready code.
...more
Added 1 day ago
